页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容水电气计算器

js当月水电气简单计算器

发布：dxy 字体：[增加减小] 类型：转载

一个可以计算当月水电气多少钱的计算器说明:输入各项后,在页面任意空白处点击鼠标,页面自动计算一次结果!，每项都必须填写，填0也可以

点击运行可以看到效果:

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><script> 
//数字型验证部分 
// JavaScript Document

//控制输入的形式为数值 
function CheckNum(thetxtNum) 
{ 
var _value = thetxtNum.value; 
var kc=window.event.keyCode;

if(kc==110 || kc==190)//如果是. 
{ 
if(_value.length==0)//第一个不允许输入。 
{ 
   alert("不能以小数点开头！"); 
   window.event.returnValue = false; 
   return; 
} 
if(_value.indexOf(".")>=0)//如果已经存在. 
{ 
   //window.event.keyCode=8; 
   alert("不能再次输入小数点！"); 
   window.event.returnValue = false; 
   return; 
} 
}

//alert(kc); 
if( (kc>=48 && kc<=57) || (kc>=96 && kc<=105) || kc==110 || kc==190)//如果是数字 或 . 
{ 
window.event.returnValue = true; 
return; 
} 
else if(kc==8)//如果是退格 
{ 
thetxtNum.select(); 
thetxtNum.value=""; 
thetxtNum.focus(); 
window.event.returnValue = false; 
return; 
} 
else if(kc==13) 
     { 
         window.event.keyCode=9; 
         window.event.returnValue = true; 
         return; 
     } 
else if(kc==9 || kc==45 || kc==46 || kc==16 || kc==17 || kc==18 || kc==20 || (kc>=112 && kc<=123)) 
     { 
         window.event.returnValue = true; 
         return; 
     } 
else 
{ 
//window.event.keyCode=8; 
alert("请输入数字！"); 
thetxtNum.value=0; 
window.event.returnValue = false; 
return; 
} 
}

//保留小数点后一位 
function Transfer(thetxtNum) 
{ 
var _value= parseFloat(thetxtNum.value); 
if(isNaN(_value)) 
     { 
         return; 
     } 
thetxtNum.value = _value.toFixed(2); 
} 
////数字型验证部分-----end

//输入日期年月 
function writeyearmonth() 
{ 
var myDate = new Date(); 
myDate.getFullYear();    //获取完整的年份(4位,1970-????) 
myDate.getMonth();  
var rqstr=""; 
rqstr=myDate.getFullYear() +"年"+myDate.getMonth() +"月"; 
document.write (rqstr); 
} 
 </script> 
<div id="main"> 
<ul> 
    <li><script>writeyearmonth();</script></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"><script>writeyearmonth();</script>合计(元)</td> 
            <td id="hj" align="right"> </td> 
        </tr> 
    </tbody> 
</table>

</div> 
<script> 
//计算输入结果到TD 
function dosum() 
{ 
var sum1,sum2,sum3,sum4; 
var sl1,sl2,sl3; 
sum1=0;sum2=0;sum3=0;sum4=0; 
sl1=0;sl2=0;sl3=0; 
var s1,s2,s3,s4,d1,d2,d3,d4,q1,q2,q3,q4; 
s1=parseFloat(document.all.s1.value);//取值 
s2=parseFloat(document.all.s2.value); 
s3=parseFloat(document.all.s3.value); 
s4=parseFloat(document.all.s4.value); 
d1=parseFloat(document.all.d1.value); 
d2=parseFloat(document.all.d2.value); 
d3=parseFloat(document.all.d3.value); 
d4=parseFloat(document.all.d4.value); 
q1=parseFloat(document.all.q1.value); 
q2=parseFloat(document.all.q2.value); 
q3=parseFloat(document.all.q3.value); 
q4=parseFloat(document.all.q4.value); 
sl1=(s2-s1);//数量 
sl2=(d2-d1); 
sl3=(q2-q1); 
sum1=sl1*s3+s4;//金额 
sum2=sl2*d3+d4; 
sum3=sl3*q3+q4; 
sum4=sum1+sum2+sum3; 
//输入出对应TD 
document.all.a1.innerHTML=s1; 
document.all.a2.innerHTML=s2; 
document.all.a3.innerHTML=sl1; 
document.all.a4.innerHTML=s3; 
document.all.a5.innerHTML=s4; 
document.all.a6.innerHTML=sum1;

document.all.b1.innerHTML=d1; 
document.all.b2.innerHTML=d2; 
document.all.b3.innerHTML=sl2; 
document.all.b4.innerHTML=d3; 
document.all.b5.innerHTML=d4; 
document.all.b6.innerHTML=sum2;

document.all.c1.innerHTML=q1; 
document.all.c2.innerHTML=q2; 
document.all.c3.innerHTML=sl3; 
document.all.c4.innerHTML=q3; 
document.all.c5.innerHTML=q4; 
document.all.c6.innerHTML=sum3;

document.all.hj.innerHTML=sum4; 
} 
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：js 水电气计算器

百度中搜索更多的关于js当月水电气简单计算器内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：JS event使用方法详解
下一篇文章：JavaScript的9个陷阱及评点分析

文章评论

共有位脚本之家网友发表了评论我来说两句

js当月水电气简单计算器

文章评论

同类文章

最近更新

热点排行

js当月水电气简单计算器

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行