效果：

代码：

<!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>

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

【前端 HTML+CSS+JavaScript(JS)】DOM练习-checkbox实现全选带注释/总结
作业要求: 效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐带注释/总结
作业要求: 效果: 总结: 1.让元素上下对齐的方法: ①让图片上下对齐用vertical-align:cender; ②让其他元素上下对齐设置line-height与height一样. 2.CSS中 ...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置带注释/总结
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentElement children 事件的绑定与带注释/总结
效果: 总结: 1.event.target和this似乎一致,自行查阅. 2.绑定事件方法:在带有括号(需要传参)时,一定要在外面带上引号,因为不加引号的话意为直接调用函数. <input t ...
html计算天数,Javascript实现简易天数计算器
本文实例为大家分享了Javascript实现简易天数计算器的具体代码,供大家参考,具体内容如下效果图: 功能: 1. 支持选择日期: 2. 自动计算闰年: 3. 支持使用当前日期. 代码: (1)h ...
HTML5期末大作业【红色的电影售票平台网站】web前端 html+css+javascript网页设计实例企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
微信对话生成源码前端-html+css+javascript
本文介绍一个微信生成器,完全利用前端做出来的. 技术介绍: html+css+javascript 运行截图: 外观设置: 对话设置: 右侧的图片可以下载保存到自己电脑上. 功能如截图所示:更换头像. ...
【前端】html+css实现鼠标悬浮变色的按钮，消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
【前端】利用HTML标签实现个人简历界面＜table＞【HTML+CSS+JavaScript(JS)】
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
JS 简易的计算器
一个输出为: 代码: 1 <!DOCTYPE html> 2 <html> 3 <script type="text/javascript" src ...

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

效果：

代码：

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

最新文章

热门文章