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

最新推荐文章于 2024-05-11 23:51:23 发布

_小鹰

最新推荐文章于 2024-05-11 23:51:23 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/cc2855816075/article/details/122888485

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

代码：

<!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个id
					vls[i] = parseInt(document.getElementById(gt).value);
					if(i<=6)
						res1 += vls[i];
					else
						res2 += 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>

_小鹰

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
【前端】【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;
复制链接

扫一扫