第7天学习Web技术笔记

博主：小草林
发布时间：2021 年 07 月 19 日
1376 次浏览
3 条评论
4150字数
分类：编程日常-Web

## 其它

webstorm

1. 计算利息小数多
   计算机算是2进制，我们填10进制；2转10会有误差
2. 无反应
   用控制台看有无报错，无报错则一行行查
3. 不输也能算
   用JS做表单验证

---

## JS表单验证

正则表达式，JS函数，DOM

---

第一个实战的代码示例:
</div>
<div class="tip inlineBlock warning">

这是head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>个人存款计算软件界面</title>
	
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
		//定义一个函数，完成计算
		function jisuan(){
			//1.获取文本框输入的数字
			var cunkun = document.getElementById("shuru").value;
			//表单验证是否为数字
			//定义一个正则表达式[规则表达式]，假设要求钱6位数字
			var regExp=/^[0-9]{2,6}$/;//最多6位，最少2位
			if (!regExp.test(cunkun)) {
			//到此说明不合法
				document.getElementById("shuru").value="输入不合法，必须为2-6位数字";
				document.getElementById("shuru").style="color: red";
				return;
			}	
			//上方取得值为:"数字"
			//"数字"-->数字
			var cunkunnum=parseInt(cunkun);//字符串转为整数
			//2.开始计算
			//取得存款年限
			var lilv=document.getElementById("year").value;
			//3.判断并求利息
			if(lilv=="0.0175") {var lixi=cunkunnum*lilv*1}
			else if(lilv=="0.0225") {var lixi=cunkunnum*lilv*2}
			else if(lilv=="0.02753") {var lixi=cunkunnum*0.0275*3}
			else if(lilv=="0.02755") {var lixi=cunkunnum*0.0275*5}
			var benxi=lixi+cunkunnum//本息合计
			//3.把结构写入相应文本框
			document.getElementById("lixi").value=lixi;
			document.getElementById("total").value=benxi;
		}
		function clearCon(){
			//清空内容
			document.getElementById("shuru").value='';
			document.getElementById("shuru").style="color: black";
		}
	</script>
</head>
```

这是body区的:
</div>

```html
<body>
	<div class="container text-center">
		<h1>个人存款计算</h1>
		<table class="table table-bordered text-center">
			<tr class="bg-primary">
				<td colspan="2">个人存款计算器</td>
			</tr>
			<tr>
				<td>存款金额</td>
				<td>
					<input onfocus="clearCon()" class="form-control" type="text" id="shuru" placeholder="请输入存款金额"/>
				</td>
			</tr>
			<tr>
				<td>存款年限</td>
				<td>
					<select id="year" class="form-control"/>
						<option  value="0.0175">1年(1.75%)</option>
						<option  value="0.0225">2年(2.25%)</option>
						<option value="0.02753">3年(2.75%)</option>
						<option  value="0.02755">5年(2.75%)</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>所得利息</td>
				<td>
					<input class="form-control" type="text" id="lixi" readonly="readonly" />
				</td>
			</tr>
			<tr>
				<td>本息合计</td>
				<td>
					<input class="form-control" type="text" id="total" readonly="readonly" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<button onclick="jisuan()" class="btn-primary btn-block">计算</button>
				</td>
			</tr>
		</table>
		开发者信息: 小草林
	</div>
</body>
```

---

第二个实战的代码示例:
</div>
<div class="tip inlineBlock warning">

这是head区的:
</div>

```html
<head>
	<meta charset="UTF-8">
	<title>个人社保计算器</title>
	
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
		function jisuan(){
			//1.获得工资，表单验证看输入是否合法
			var sal=document.getElementById("salary").value;//取得工资
			//表单验证是否合法
			var regExp=/^[0-9]{4,5}$/;//最多5位，最少4位
			if (!regExp.test(sal)) {
				//到此说明不合法
				document.getElementById("salary").value="输入不合法，必须为4-5位数字";
				document.getElementById("salary").style="color: red";
				return;
			}
			//2.输入合法，开始算
			var salnum=parseInt(sal);//字符串转为数字
			var ylgr=salnum*0.08;//个人交养老保险
			var ylgs=salnum*0.2;//公司交养老保险
			var ybgr=salnum*0.02;
			var ybgs=salnum*0.06;
			var sygr=salnum*0.005;
			var sygs=salnum*0.015;
			var gsgs=salnum*0.005;
			var syugs=salnum*0.008;
			var gjjgr=salnum*0.12;
			var gjjgs=salnum*0.12;
			var hjgr=ylgr+ybgr+sygr+gjjgr;
			var hjgs=ylgs+ybgs+sygs+gsgs+syugs+gjjgs;
			var total=hjgs+salnum;	
			//3.把计算结果放入单元格
			document.getElementById("ylgr").innerHTML=ylgr;
			document.getElementById("ylgs").innerText=ylgs;
			document.getElementById("ybgr").innerHTML=ybgr;
			document.getElementById("ybgs").innerText=ybgs;
			document.getElementById("sygr").innerHTML=sygr;
			document.getElementById("sygs").innerText=sygs;
			document.getElementById("gsgs").innerHTML=gsgs;
			document.getElementById("syugs").innerText=syugs;
			document.getElementById("gjjgr").innerHTML=gjjgr;
			document.getElementById("gjjgs").innerText=gjjgs;
			document.getElementById("hjgr").innerHTML=hjgr;
			document.getElementById("hjgs").innerText=hjgs;
			document.getElementById("total").innerText=total;
				
		}
		function clearCon(){
			//清空内容
			document.getElementById("salary").value='';
			document.getElementById("salary").style="color: black";
		}
	</script>
</head>
```

这是body区的:
</div>

```html
<body>
	<div class="container text-center">
		<img src="//www.xuegao-tzx.top/usr/uploads/auto_save_image/d20ca8cb6a76b1c2b3187edf0c691d1e.jpg" class="img-circle" width="100px">
		<table class="table table-bordered text-center">
			<tr>
				<td >工资</td>
				<td colspan="3">
					<input onfocus="clearCon()" type="text" id="salary" placeholder="请输入工资" class="form-control">
				</td>
				<td>
				<button onclick="jisuan()" class="btn btn-block btn-danger" id="jisu">计算</button>
			</td>
			</tr>
			<tr class="bg-primary">
				<td>险种</td>
				<td>个人%</td>
				<td>个人</td>
				<td>公司%</td>
				<td>公司</td>
			</tr>
			<tr>
				<td>养老</td>
				<td>8%</td>
				<td id="ylgr"></td>
				<td>20%</td>
				<td id="ylgs"></td>
			</tr>
			<tr>
				<td>医疗</td>
				<td>2%</td>
				<td id="ybgr"></td>
				<td>6%</td>
				<td id="ybgs"></td>
			</tr>
			<tr>
				<td>失业</td>
				<td>0.5%</td>
				<td id="sygr"></td>
				<td>1.5%</td>
				<td id="sygs"></td>
			</tr>
			<tr>
				<td>工商</td>
				<td></td>
				<td></td>
				<td>0.5%</td>
				<td id="gsgs"></td>
			</tr>
			<tr>
				<td>生育</td>
				<td></td>
				<td></td>
				<td>0.8%</td>
				<td id="syugs"></td>
			</tr>
			<tr>
				<td>公积金</td>
				<td>12%</td>
				<td id="gjjgr"></td>
				<td>12%</td>
				<td id="gjjgs"></td>
			</tr>
			<tr>
				<td>合计</td>
				<td>个人合计</td>
				<td id="hjgr"></td>
				<td>公司合计</td>
				<td id="hjgs"></td>
			</tr>
			<tr>
				<td>总额</td>
				<td id="total" colspan="4"></td>
			</tr>
		</table>
		开发者信息: 小草林
	</div>
</body>
```

最后修改：2021 年 07 月 24 日

如果觉得我的文章对你有用，请随意赞赏，谢谢

3 条评论

珂泽 Edge 91.0.864.71 Windows 10 中国湖北黄冈
July 23rd, 2021 at 08:02 am

加油

回复
1. 小草林 Edge 91.0.864.71 Windows 10 中国山西太原
  July 23rd, 2021 at 04:25 pm
  
  @珂泽
  
  谢谢
  
  回复
小有名气的学生 Google Chrome 88.0.4324.93 Android 10 中国山西太原
July 22nd, 2021 at 07:40 pm

好

回复