200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 【前端】【HTML+CSS+JavaScript(JS)】简易工资计算器的实现

【前端】【HTML+CSS+JavaScript(JS)】简易工资计算器的实现

时间:2020-01-08 12:08:38

相关推荐

【前端】【HTML+CSS+JavaScript(JS)】简易工资计算器的实现

效果:

代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>计算工资</title><style type="text/css">#b-box{width: 1024px;text-align: center;}.modual,#cal{font-size: 14px;display: inline-block;width: 70px;margin-top: 20px;}.modual input{width: 60px;}</style></head><body><script type="text/javascript">function cal(){var gt;var vls = new Array(10);var res1 = 0;var res2 = 0;for(var i = 1 ; i <= 10 ; i++){gt = "t";gt += i;//得到了6个idvls[i] = parseInt(document.getElementById(gt).value);if(i<=6)res1 += vls[i];elseres2 += vls[i];}document.getElementById("res1").value = res1;document.getElementById("res2").value = res1 - res2;}</script><div id="b-box"><div class="modual"><!--模块-->基本工资<br/><input type="text" name="" id="t1" value="" /></div><div class="modual"><!--模块-->交通补贴<br/><input type="text" name="" id="t2" value="" /></div><div class="modual"><!--模块-->高温补贴<br/><input type="text" name="" id="t3" value="" /></div><div class="modual"><!--模块-->全勤奖<br/><input type="text" name="" id="t4" value="" /></div><div class="modual"><!--模块-->加班工资<br/><input type="text" name="" id="t5" value="" /></div><div class="modual"><!--模块-->考核奖金<br/><input type="text" name="" id="t6" value="" /></div><div class="modual"><!--模块-->社保扣除<br/><input type="text" name="" id="t7" value="" /></div><div class="modual"><!--模块-->公积金扣除<br/><input type="text" name="" id="t8" value="" /></div><div class="modual"><!--模块-->其他扣除<br/><input type="text" name="" id="t9" value="" /></div><div class="modual"><!--模块-->税<br/><input type="text" name="" id="t10" value="" /></div><div id="cal"><!--计算--><input type="button" name="" id="" value="计算" onclick="cal()"/></div><div class="modual"><!--模块-->应发工资<br/><input type="text" name="" id="res1" value="" /></div><div class="modual"><!--模块-->实发工资<br/><input type="text" name="" id="res2" value="" /></div></div></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。