电力计算器jquery

Posted 2021-02-23

The code is meant to find out electrical dc power using formulas p=vi, P=v2/R, and P=i2*R.

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 
<style type="text/css">
#dc-power-button-vi,#dc-power-button-vr,#dc-power-button-ir{
position:relative;
float:right;
margin-top:5px;
}
#tabs ul{
background:#fa0;
}
 
#dc-power{
margin-bottom:5px;
}
 
</style>
 
 
 
<script>
$(document).ready(function(){
$( "#tabs" ).tabs();
 
$("#dc-power-button-vi").click(function(){
        $("#output-of-input").text($(".dc-i").val()*$(".dc-v").val() + "  Watts");
   });
$("#dc-power-button-vr").click(function(){
        $("#output-of-input").text($(".dc-v-of-r").val()*$(".dc-v-of-r").val()/$(".dc-r").val() + "  Watts");
   });
$("#dc-power-button-ir").click(function(){
        $("#output-of-input").text($(".dc-i-of-r").val()*$(".dc-i").val()*$(".dc-r-of-r").val() + "  Watts");
   });
});
</script>
<div id="tabs">
<ul id="dc-p">
<li><a href="#tabs-1">P=VI</a></li>
<li><a href="#tabs-2">P=v<sup>2</sup>/R</a></li>
<li><a href="#tabs-3">P=i<sup>2</sup>*R</a></li>
</ul>
<div id="tabs-1">
 
<div class="row" id="dc-power">
  <div class="col-xs-6">
    <input type="text" class="form-control dc-v" placeholder="Voltage value">
  </div>
  <div class="col-xs-6">
    <input type="text" class="form-control dc-i" placeholder="Current value">
  </div>
<div class="col-xs-6"></div>
  <div class="col-xs-6">
<button type="button" id="dc-power-button-vi" class="btn btn-primary">Calculate</button>
</div>
</div>
 
 
</div>
<div id="tabs-2">
<div class="row" id="dc-power">
  <div class="col-xs-6">
    <input type="text" class="form-control dc-v-of-r" placeholder="Voltage value">
  </div>
  <div class="col-xs-6">
    <input type="text" class="form-control dc-r" placeholder="Resistance value">
  </div>
<div class="col-xs-6"></div>
  <div class="col-xs-6">
<button type="button" id="dc-power-button-vr" class="btn btn-primary">Calculate</button>
</div>
</div>
 
</div>
<div id="tabs-3">
<div class="row" id="dc-power">
  <div class="col-xs-6">
    <input type="text" class="form-control dc-i-of-r" placeholder="Current value">
  </div>
  <div class="col-xs-6">
    <input type="text" class="form-control dc-r-of-r" placeholder="Resistance value">
  </div>
<div class="col-xs-6"></div>
  <div class="col-xs-6">
<button type="button" id="dc-power-button-ir" class="btn btn-primary">Calculate</button>
</div>
</div>
</div>
</div>
<div id="output-of-input">Output</div>