JS: 前端做题案例（获取验证码，添加，渲染，删除等）

最新推荐文章于 2022-09-05 21:47:11 发布

一染星辰

最新推荐文章于 2022-09-05 21:47:11 发布

阅读量217

点赞数

分类专栏： javascript试题文章标签： html css html5 前端 JavaScript

本文链接：https://blog.csdn.net/weixin_59519449/article/details/120189793

版权

javascript试题专栏收录该内容

29 篇文章 0 订阅

订阅专栏

思路；

1.获取元素、

2.检查是否有存储

3，利用for 循环，获取验证码

4，利用分支语句，创建字面量，调用，等

5，利用for循环，检查男女性别

6，调用删除按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div class="from-box">
			<h2>注册</h2>
			用户名：<input type="text" id="user"><br><br>
			密码：<input type="password" id="password"><br><br>
			确认密码：<input type="password" id="sure"><br><br>
			性别：<input type="radio" name="sex" value="男">男 <input type="radio" name="sex"value="女">女 <br><br>
			<button type="button" id="btn">获取验证码</button> <input type="text" id="yzm"><br><br>
			<input type="checkbox" id="agree">我已阅读并同意条款 <br> <br>
			<button type="button" id="add">注册</button>
		</div>
		
		<div show-box>
			<h2>用户信息</h2>
			<table border="1" cellspacing="0" cellpadding=""style="border-collapse: collapse;"width="800">
				
			<thead>
				<tr>
					<th></th>
					<th>ID</th>
					<th>用户名</th>
					<th>密码</th>
					<th>性别</th>
					<th>注册时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox"></td>
					<td>1</td>
					<td>张三</td>
					<td>张三123</td>
					<td>男</td>
					<td>2021-09-08 14：02</td>
					<td><button>删除</button></td>
				</tr>
			</tbody>
			</table>
			<button type="button" id="del-checked">删除选中</button>
		</div>
		<script type="text/javascript">
			//1.获取元素
			var btn=document.getElementById("btn")
			var add=document.getElementById("add")
			var yzm=document.getElementById("yzm")
			var agree=document.getElementById("agree")
			var password=document.getElementById("password")
			var surePassword=document.getElementById("sure");
			var sexs=document.getElementsByName("sex")
			var delChecked=document.getElementById("del-checked")
			var tbody=document.querySelector("tbody");
			
		var arr=[];
		 //判断本地是否有存储
		if(localStorage.dataArr){
		 	var arr=JSON.parse(localStorage.dataArr);
			show(arr)
		 }
		
		//获取验证码
		var randomNum=""
		//按钮点击事件
		btn.onclick=function(){
			randomNum="";
			for(var i=0; i<4;i++){
				var num=Math.floor(Math.random()*10);
				randomNum+=num
			}
			alert("验证码为："+randomNum)
		}
		
		//注册功能按钮
		add.onclick=function(){
			if(!agree.checked){
				alert("请先阅读条款再注册");
			}else if(password.value!=surePassword.value){
				alert("密码输入不一致")
			}else if(password.value != surePassword.value){
				alert("您输入的密码有误")
			} else if(randomNum==""){
				alert("请输入验证码")
			}else if(yzm.value != randomNum){
				alert("请输入正确的验证码")
			}else{
				var obj={
					userName:user.value,
					password:password.value,
					surePassword:surePassword.value,
					sexs:getSexFn(),
					time:time(),
				}
				arr.push(obj);
				localStorage.dataArr=JSON.stringify(arr);
				user.value=""
				password.value=""
				yzm.value=""
				sexs[0].checked=true;
				agree.checked=false;
				randomNum="";
				show()
			}
		}
		//判断性别
		function  getSexFn(){
			for (var i=0; i<sexs.length;i++){
				if(sexs[i].checked){
					return sexs[i].value
				}
			}
		}
		
		//获取时间函数
		function time(){
			var time=new Date();
			var year=time.getFullYear()
			var month=time.getMonth()+1
			var date=time.getDate()
			var h=time.getHours()
			var m=time.getMinutes()
			var s=time.getSeconds()
			month=upZero(month)
			date=upZero(date)
			h=upZero(h)
			m=upZero(m)
			s=upZero(s)
			return`${year}-${month}-${date} ${h}:${m}:${s}`
		}
		//时间补零 
		function upZero(t){
			return t<10? "0"+t:t
		}
		
		//渲染页面
		function show(){
			tbody.innerHTML=""
			localStorage.dataArr = JSON.stringify(arr)
			for(var i=0;i<arr.length;i++){
				var tr=document.createElement("tr");
				tr.innerHTML=`
				<td><input type="checkbox" class="delchecked"></td>
				<td>${i+1}</td>
				<td>${arr[i].userName}</td>
				<td>${arr[i].password}</td>
				<td>${arr[i].sexs}</td>
				<td>${arr[i].time}</td>
				<td><button class="del">删除</button></td>`;
				tbody.appendChild(tr)
				dels()
			}
		}
		
		//删除点击事件
		function dels(){
			var dels=document.getElementsByName("del")
			for(let i=0;i<dels.length;i++){
				dels[i].onclick=function(){
					var a=confirm("您是否想要删除该条数据")
					if(a){
						arr.splice(i,1)
						show()
					}
				}
			}
		}
		
		//删除选中事件
		delChecked.onclick=function(){
			var ches=document.getElementsByClassName("delchecked")
			for(let i=ches.length-1;i>=0;i--)
{
	if(ches[i].checked){
		arr.splice(i,1)
	}
}			
show()
		}
		</script>
	</body>
</html>

一染星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS: 前端做题案例（获取验证码，添加，渲染，删除等）

思路； 1.获取元素、2.检查是否有存储3，利用for 循环，获取验证码4，利用分支语句，创建字面量，调用，等5，利用for循环，检查男女性别6，调用删除按钮<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class=.
复制链接

扫一扫