思路;
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>