一个简单的水费用量计算系统代码分享，仅供参考。利用JS代码自动计算差值及费用值。样例如图：
代码部分：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>水表费用计算系统</title>
<style type="text/css">
.main{
max-width:640px; margin:0 auto; margin-top:50px;
}
table{
border-left:1px #ddd solid; border-top:1px #ddd solid; margin-bottom:20px;
}
table td{
border-right:1px #ddd solid; border-bottom:1px #ddd solid; padding-left:10px; height:50px; line-height:50px;
}
table tr:nth-child(2n){
background-color:#f3f3f3;
}
h2{
text-align:center;
}
.web_txt{
height:28px; line-height:28px; border:1px #ddd solid; padding-left:10px; font-size:16px;
}
.web_txt:focus{
border:1px #09F solid;
}
.web_bnt{
height:30px; line-height:30px; background-color:#09F; border:0px; color:#fff; cursor:pointer;
}
@media only screen and (max-width: 430px) {
table td{
padding-left:5px;
}
.web_txt{
width:76%;
}
.price{
width:70%;
}
}
</style>
</head>
<body>
<div class="main">
<h2>水表费用计算系统</h2>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="center">上个月水表数</td>
<td align="center">本月的水表数</td>
</tr>
<tr>
<td align="center"><input type="text" id="textbox1" placeholder="上个月水表数" class="web_txt" value="10" oninput="calculateDifference()"></td>
<td align="center"><input type="text" id="textbox2" placeholder="本月的水表数" class="web_txt" value="30" oninput="calculateDifference()"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="center">使用数量（吨）</td>
<td align="center">单价（元）</td>
</tr>
<tr>
<td align="center"><input type="text" id="difference" placeholder="使用数量" class="web_txt" oninput="calculatePrice()"><!--<button class="web_bnt" onclick="calculateDifference()">计算数量</button>--></td>
<td align="center"><input type="text" id="textbox3" placeholder="请输入单价" class="web_txt" value="2" oninput="calculatePrice()"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">计算费用（元）</td>
</tr>
<tr>
<td align="center"><input type="text" id="price" placeholder="本月的费用" class="web_txt price" readonly="readonly"><button class="web_bnt" onClick="calculatePrice()">计算费用</button></td>
</tr>
</table>
</div>
<script>
window.onload = function() {
var value1 = parseFloat(document.getElementById('textbox1').value);
var value2 = parseFloat(document.getElementById('textbox2').value);
var difference = value2 - value1;
document.getElementById('difference').value = difference;
var value3 = parseFloat(document.getElementById('difference').value);
var value4 = parseFloat(document.getElementById('textbox3').value);
var price = value3 * value4;
var roundedNumber = price.toFixed(2);
document.getElementById('price').value = roundedNumber;
console.log('页面加载完毕');
};
function calculateDifference() {
var value1 = parseFloat(document.getElementById('textbox1').value);
var value2 = parseFloat(document.getElementById('textbox2').value);
var difference = value2 - value1;
document.getElementById('difference').value = difference;
var value3 = parseFloat(document.getElementById('difference').value);
var value4 = parseFloat(document.getElementById('textbox3').value);
var price = value3 * value4;
var roundedNumber = price.toFixed(2);
document.getElementById('price').value = roundedNumber;
}
function calculatePrice() {
var value3 = parseFloat(document.getElementById('difference').value);
var value4 = parseFloat(document.getElementById('textbox3').value);
var price = value3 * value4;
var roundedNumber = price.toFixed(2);
document.getElementById('price').value = roundedNumber;
}
</script>
</body>
</html>扫描二维码手机查看该文章
文章引用：https://www.qinghuahulian.com/news/webzhishi/1465.html
在线咨询
电话咨询
