本文介绍一个基于JavaScript的水电气费用简易计算器。该工具通过HTML表单接收用户输入，利用JS脚本实时计算当月水、电、气各项费用及总合计金额，并提供运行、复制和保存代码的功能按钮，适用于前端基础功能演示。
JS当月水电气简单计算器
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css"> body{ font-size:12px; text-align: center; } td{font-size:12px; } .outtab { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #CCCCCC; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; } #main { border: 1px solid #CCCCCC; width:600px; height:200px; text-align: left; padding: 10px; }</style> <div id="main"> <ul> <li></li> <li>水:起度 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="s1" /> 止度 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="s2" /> 单价 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="s3" /> 附加 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="s4" /> </li> <li>电:起度 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="d1" /> 止度 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="d2" /> 单价 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="d3" /> 附加 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="d4" /> </li> <li>气:起度 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="q1" /> 止度 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="q2" /> 单价 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="q3" /> 附加 <input onkeydown="CheckNum(this)" onblur="dosum()" style="WIDTH: 50px" name="q4" /> </li> <li>说明:输入各项后,在页面任意空白处点击鼠标,页面自动计算一次结果! </li> </ul> <table cellspacing="0" bordercolordark="#ffffff" cellpadding="0" width="646" align="left" bordercolorlight="#000000" border="1"> <tbody> <tr> <td align="center" width="90">名称</td> <td align="center" width="90">起度(吨/度/方)</td> <td align="center" width="90">止度(吨/度/方)</td> <td align="center" width="90">数量(吨/度/方)</td> <td align="center" width="90">单价(元)</td> <td align="center" width="90">附加金额(元)</td> <td align="center" width="90">总金额(元)</td> </tr> <tr> <td align="center">水</td> <td id="a1" align="right"> </td> <td id="a2" align="right"> </td> <td id="a3" align="right"> </td> <td id="a4" align="right"> </td> <td id="a5" align="right"> </td> <td id="a6" align="right"> </td> </tr> <tr> <td align="center">电</td> <td id="b1" align="right"> </td> <td id="b2" align="right"> </td> <td id="b3" align="right"> </td> <td id="b4" align="right"> </td> <td id="b5" align="right"> </td> <td id="b6" align="right"> </td> </tr> <tr> <td align="center">气</td> <td id="c1" align="right"> </td> <td id="c2" align="right"> </td> <td id="c3" align="right"> </td> <td id="c4" align="right"> </td> <td id="c5" align="right"> </td> <td id="c6" align="right"> </td> </tr> <tr> <td align="left" colspan="6">合计(元)</td> <td id="hj" align="right"> </td> </tr> </tbody> </table> </div> 注意：若需引入外部JavaScript文件，请在页面加载完成后刷新页面以确保脚本正确执行。