HTML CSS JavaScript简单案例实现

文章目录

- 简易计算器
- 个人简历
- 登录页面
- 注册页面
- - 注册（一）
  - 注册（二）
- html、css 实现一个漂亮的表格
- 书城列表页面
- 简单框架
- 全选反选功能

简易计算器

calculator.html

<!doctype html>
<html>
<head><meta charset="utf-8"><title>Calculator</title>
</head>
<style>*{ font-size:36px;}table{background-color: white;}#t{width:480px;height:80px;text-align: right;font-size: 48px;background-color: white;}.number{width:120px;height:80px;background-color:lightskyblue;border-radius: 10%;margin: 0;display: block;}.signs{width:120px;height:80px;border-radius: 10%;background-color:  greenyellow;margin: 0;display: block;}.shaw{width:120px;height:80px;border-radius: 10%;background-color:  aliceblue;margin: 0;display: block;}.equal{width:120px;height:80px;border-radius: 10%;background-color:  rgb(235, 199, 235);margin: 0;display: block;}.kuohao{width: 60px;height: 80px;float: left;align-self: 0;border-radius: 10%;background-color:  aqua;}table td,table th{border: none ;}</style><script>//设置标志，用于没有输入时显示0，以及有显示时清空var flag=true;function func(str){var t=document.getElementById("t");if(flag){//清除没有输入时的0t.value="";}//改变状态，不再清空内容flag=false;//将之前的内容和输入的内容相加，重新显示t.value=t.value+str;}//回退一个数，相当于撤销function backspace(){var t=document.getElementById("t");t.value=t.value.substr(0,t.value.length-1);}//清空显示内容function AC(){var t=document.getElementById("t");//显示0t.value="0";//让下次输入可以清空0flag=true;}//计算结果function equals(){var t=document.getElementById("t");//将字符串转换为逻辑运算t.value=eval(t.value);}
</script>
<body>
<!--    内边距          外边距        边框        居中-->
<table cellpadding="0" cellspacing="0" border="2px"   align="center" ><tr><td colspan="4"><input type="text" value="0" id="t" /></td></tr><tr><td><input type="button" class="number" value="7"  onClick="func('7')"/></td><td><input type="button" class="number" value="8" onClick="func('8')"/></td><td><input type="button" class="number" value="9" onClick="func('9')"/></td><td><input type="button" class="signs" value="/" onClick="func('/')"/></td></tr><tr><td><input type="button" class="number" value="4" onClick="func('4')"/></td><td><input type="button" class="number" value="5" onClick="func('5')"/></td><td><input type="button" class="number" value="6" onClick="func('6')"/></td><td><input type="button" class="signs" value="*" onClick="func('*')"/></td></tr><tr><td><input type="button" class="number" value="1" onClick="func('1')"/></td><td><input type="button" class="number" value="2" onClick="func('2')"/></td><td><input type="button" class="number" value="3" onClick="func('3')"/></td><td><input type="button" class="signs" value="-" onClick="func('-')"/></td></tr><tr><td><input type="button" class="number" value="0" onClick="func('0')"/></td><td><input type="button" class="shaw" value="." onClick="func('.')"/></td><td><input type="button" class="number" value="00" onClick="func('00')"/></td><td><input type="button" class="signs" value="+" onClick="func('+')"/></td></tr><tr><td><input type="button" class="kuohao" value="(" onClick="func('(')"/><input type="button" class="kuohao" value=")" onClick="func(')')"/></td><td><input type="button"  class="shaw" value="后退" style="float:top" onClick="backspace()"/></td><td><input type="button" class="shaw" value="清除" onClick="AC()"/></td><td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td></tr>
</table></body>
</html>

实现效果

在这里插入图片描述

个人简历

resume.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" cellspacing="0" align="center"><tbody><caption><h1>我的简历</h1></caption><tr><td>姓名</td><td><input type="text"></td><td>性别</td><td><input type="text"></td><td rowspan="4" align="center"><img src="https://img2.baidu.com/it/u=2859542338,3761174075&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1660150800&t=c1b0417668bde440f89a235b4b610f05" width="120px" height="150px" alt="头像" title="头像"></td></tr><tr><td>民族</td><td><input type="text"></td><td>籍贯</td><td><input type="text"></td></tr>	<tr><td>出生日期</td><td><input type="date"></td><td>婚姻状况</td><td><input type="text"></td></tr><tr><td>学历</td><td><input type="text"></td><td>体重身高</td><td><input type="text"></td></tr>
<tr><td>专业</td><td><input type="text"></td><td>健康状况</td><td colspan="2"><input type="text"></td></tr><tr><td>毕业院校</td><td colspan="2"><input type="text"></td><td>毕业日期</td><td><input type="date"></td></tr><tr><td>联系电话</td><td><input type="text"></td><td>电子邮箱</td><td colspan="2"><input type="text"></td></tr>
<tr><td>主修课程</td><td colspan="4"><textarea rows="3" cols="60"></textarea></td></tr><tr><td>个人技能</td><td colspan="4"><textarea rows="5" cols="60"></textarea></td></tr><tr><td>工作经历</td><td colspan="4"><textarea rows="5" cols="60"></textarea></td></tr><tr><td>兴趣爱好</td><td colspan="4"><textarea rows="5" cols="60"></textarea></td></tr><tr><td>自我评价</td><td colspan="4"><textarea rows="5" cols="60"></textarea></td></tr></tbody></table></body>
</html>

实现效果

在这里插入图片描述

登录页面

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/login.css" type="text/css">
</head>
<body>
<div class="container"><div class="welcome"><h1 class="person">用户登录</h1><div class="index"><div class="login"><input type="text" class="text" placeholder="请输入用户名"><br><input type="password" class="password" placeholder="输入密码"><br><input type="button" class="button1" value="登录"><br><a href="regist2.html" ><input type="button" class="button2" value="注册"></a><br><span class="forge"><a href="forge.html" target="_blank">忘记密码</a></span></div></div></div>
</div>
</body>
</html>

login.css

.body{margin:0;padding:0;}
a{text-decoration: none;
}
a:hover{color:#6effef;
}
input{border:none;box-shadow: none;font-size:15px;color:#333333;outline: none;  /*鼠标点击是输入框颜色不发生改变*/
}.text{height:40px;width:330px;border-radius: 10px;
}
.password{height:40px;width:330px;margin-top: 20px;border-radius: 10px;
}
.button1{height:40px;width:330px;background-color: #319aec;font-size:16px;margin-top:15px;border-radius: 10px;color:white;
}
.button1:hover{color:white;background-color: #286090;
}
.button2:hover{color:white;background-color: #286090;
}
.button2{height:40px;width:330px;background-color: #319aec;font-size:16px;margin-top:15px;/*margin-bottom: 100px;*/border-radius: 10px;color:white;display:block;
}
.container{background-image: url(../img/1.jpg);background-size: 1500px 750px;width:1500px;height:750px;border:1px black solid;/*background-repeat: no-repeat;*/
}
.index{/*margin-left:800px;*//*margin-top: 200px;*/height:320px;width:400px;border-radius: 10px;box-shadow: 5px 5px 5px #888;background-color: #edeffb;
}
.login{margin-left:40px;padding-top:40px;
}
.forge{display:block;text-align: right;padding-right:25px;
}
.welcome{margin-top:200px;margin-left:800px;
}
.person{font-size: 30px;color:#ffffff;line-height: 1em;text-align: center;font-weight:500;margin-right:300px;
}

实现效果

在这里插入图片描述

注册页面

注册（一）

resign.css

.body{margin:0;padding:0;
}
a{text-decoration: none;
}
a:hover{color:#6effef;
}
input{border:none;box-shadow: none;font-size:15px;color:#333333;outline: none;  /*鼠标点击是输入框颜色不发生改变*/
}.text{height:40px;width:330px;border-radius: 10px;
}
.password{height:40px;width:330px;margin-top: 20px;border-radius: 10px;
}
.button1{height:40px;width:330px;margin-top: 20px;border-radius: 10px;
}
.button2:hover{color:white;background-color: #286090;
}
.button2{height:40px;width:330px;background-color: #319aec;font-size:16px;margin-top:15px;/*margin-bottom: 100px;*/border-radius: 10px;color:white;display:block;
}
.container{background-image: url(../img/bg_header.jpg);background-size: 1500px 750px;width:1500px;height:750px;border:1px black solid;/*background-repeat: no-repeat;*/
}
.index{/*margin-left:800px;*//*margin-top: 200px;*/height:320px;width:400px;border-radius: 10px;box-shadow: 5px 5px 5px #888;background-color: #edeffb;
}
.login{margin-left:40px;padding-top:40px;
}
.forge{display:block;text-align: right;padding-right:25px;
}
.welcome{position: absolute;top: 10%;right: 35%;
}
.person{font-size: 30px;color:#ffffff;line-height: 1em;text-align: center;font-weight:500;margin-right:300px;
}

resign.html

<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/resign.css" type="text/css">
</head>
<body>
<div class="container"><div class="welcome"><h1 class="person">用户注册</h1><div class="index"><div class="login"><input type="text" class="text" placeholder="手机号/QQ号/微信号"><br><input type="password" class="password" placeholder="输入密码"><br><input type="password" class="button1" placeholder="请确保两次输入密码一致"><br><a href="" target="_blank"><input type="button" class="button2" value="注册"></a><br><span class="forge"><a href="login.html" >已有账号，直接登录</a></span></div></div></div>
</div>
</body>
</html>

实现效果

在这里插入图片描述

注册（二）

regist2.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>注册页面</title><link rel="stylesheet" href="css/regs.css" type="text/css"></head><style type="text/css">*{   margin: 0;   padding: 0;}   div{   width: 550px;height: 550px;background-color: #F0F8FF;        }   .center-in-center{   position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   -moz-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%);   -o-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);   } </style><body style="background-image: url(../weekExam/img/bg_header.jpg);"><div class="center-in-center"><table ><tr><td colspan="2" class="head">新用户注册</td></tr><tr><td class="td1"><font>name:</font></td><td class="td2"><input type="text" /></td></tr><tr><td class="td1"><font>pass:</font></td><td class="td2"><input type="password" /></td></tr><tr><td class="td1"><font>repass:</font></td><td class="td2"><input type="password" /></td></tr><tr><td class="td1"><font>gender:</font></td><td class="td2"><input type="radio" name="sex" />男<input type="radio" name="sex" />女</td></tr><tr><td class="td1"><font>爱好:</font></td><td class="td2"><input type="checkbox" name="hobby"/>学习<input type="checkbox" name="hobby"/>编程<input type="checkbox" name="hobby"/>工作</td></tr><tr><td class="td1"><font>birth: </font></td><td class="td2"><input type="date" /></td></tr><tr><td class="td1"><font>salary:</font></td><td class="td2"><input type="text" /></td></tr><tr><td class="td1"><font>学历：</font></td><td class="td2"><select><option>大专</option><option>本科</option><option>硕士</option><option>博士</option></select></td></tr><tr><td class="td1"><font>info:</font></td><td class="td2"><textarea cols="20" rows="3"></textarea></td></tr><tr><td class="td1" ><input type="reset"></td><td colspan="1" ><input type="submit" name="提交"></td></tr></table></div></body>
</html>

rgs.css

table{width: 100%;height: 100%;border-collapse: collapse;padding: 50px;border-color: #FFFFFF;}
.head{font-size: 2em;position: relative;left: auto;}
tr,td{text-align: center;padding: 0px 0;
}
button{padding: 5px;margin: 5px;font-size: 20px;background-color:#008c8c ;border-radius: 10px;color: #fff;}
font{padding-right: 0;}
input{border-collapse: collapse;background-color: #fff;margin: 10px;}
.td1{text-align: right;font-family: "楷体";font-size: 20px;
}
.td2{text-align: left;width: 300px;
}

实现效果

在这里插入图片描述

html、css 实现一个漂亮的表格

表格实现

table.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格</title><link rel="stylesheet" type="text/css"  href="css/table.css"/></head><body><table ><caption>表格标题</caption><thead><tr><th>全选<input type="checkbox" name ="count" /></th><th>开馆日期</th><th>容纳人数</th><th>开馆时间</th><th>闭馆时间</th><th>预约状态</th><th>操作</th></thead><tbody><tr><td><input type="checkbox" name ="count" /></td><td>2202-09-13</td><td>1000</td><td>11:33:14</td><td>11:33:16</td><td>已审核</td><td><a href="table2.html"><img src="img/add1.png"></a><img src="img/up1.png"><img src="img/del1.png"></td></tr><tr><td><input type="checkbox" name ="count" /></td><td>2202-09-13</td><td>1000</td><td>11:33:14</td><td>11:33:16</td><td>已审核</td><td><a href="table2.html"><img src="img/add1.png"></a><img src="img/up1.png"><img src="img/del1.png"></td></tr><tr><td><input type="checkbox" name ="count" /></td><td>2202-09-13</td><td>1000</td><td>11:33:14</td><td>11:33:16</td><td>已审核</td><td><a href="table2.html"><img src="img/add1.png"></a><img src="img/up1.png"><img src="img/del1.png"></td></tr><tr><td><input type="checkbox" name ="count" /></td><td>2202-09-13</td><td>1000</td><td>11:33:14</td><td>11:33:16</td><td>已审核</td><td><a href="table2.html"><img src="img/add1.png"></a><img src="img/up1.png"><img src="img/del1.png"></td></tr></tbody><tfoot><tr><td colspan="7"><button>批量审核</button></td></tr></tfoot></table></body>
</html>

table.css

table{width: 100%;border-collapse: collapse;
}
table caption{font-size: 2em;font-weight: bold;margin: 1em 0;
}
th,td{border: 1px solid #999;text-align: center;padding: 20px 0;
}
table thead tr{background-color: #008c8c;color: #fff;
}
table tbody tr:nth-child(odd){background-color: #eee;
}
table tbody tr:hover{background-color: #ccc;
}
table tbody tr td:first-child{color: #f40;
}
table tfoot tr td button{padding: 5px;margin: 5px;font-size: 20px;background-color:#008c8c ;border-radius: 10px;color: #fff;}
img{width: 40px;height: 45px;
}

实现效果

在这里插入图片描述

table2.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>详细信息</title><link rel="stylesheet" type="text/css"  href="css/table2.css"/></head><style type="text/css">*{   margin: 0;   padding: 0;   background-color: #EDEFFB;   }   div{   width: 550px;height: 500px;background-color: #EDEFFB;}   .center-in-center{   position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   -moz-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%);   -o-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);   } </style><body><div class="center-in-center"><table><tr><td class="td1"><font color="red" id="font">*</font>开馆日期：</td><td><input type="datetime"   onchange="noNull()"/></td></tr><tr><td class="td1"><font color="red" id="font">*</font>可容纳人数：</td><td><input type="text" /></td></tr><tr><td class="td1"><font color="red" id="font">*</font>网上预约人数：</td><td><input type="text" /></td></tr><tr><td class="td1"><font color="red" id="font">*</font>开馆时间：</td><td><input type="datetime" /></td></tr><tr><td class="td1"><font color="red" id="font">*</font>闭馆时间：</td><td><input type="datetime" /></td></tr><tr><td class="td1"><font color="red" id="font">*</font> 审核状态：</td><td><input type="text" /></td></tr><tr><td class="td1" colspan="2" > <a href="table.html"><button  class="btn">返回</button></a></td></tr></table><script language="JavaScript">function noNull(){var font1 = document.getElementById("font");font1.style.color = "blue";font1.innerHTML="";}</script></div></body>
</html>

table2.css

table{width: 100%;height: 100%;border-collapse: collapse;background-color: beige;
}
th,td{}
.td1{text-align: right;font-family: "宋体";font-size: 25px;
}
input{width:300px;height: 30px;border-collapse: collapse;background-color: #fff;
}
.btn{height:30px;width: 80px;font-family: "宋体";font-size: 20px;border-radius: 10px;background-color: aliceblue;
}

实现效果

在这里插入图片描述

书城列表页面

main01.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/net.css" /></head><body><div class="h2"><span class="s5">PRODUCT&nbsp;List</span></div><div class="div4"><table  class="table"><tr><th><td><img src="img/9.png"><p>书名:XXX</p><p>售价:XXX</p></td></th><th><td><img src="img/10.png"><p>书名:XXX</p><p>售价:XXX</p></td></th><th><td><img src="img/3.png"><p>书名:XXX</p><p>售价:XXX</p></td></th><th><td><img src="img/4.png"><p>书名:XXX</p><p>售价:XXX</p></td></th><th><td><img src="img/5.png"><p>书名:XXX</p><p>售价:XXX</p></td></th></tr><tr><th><td><img src="img/6.png"><p>书名:XXX</p><p>售价:XXX</p></td></th><th><td><img src="img/7.png"><p>书名:XXX</p><p>售价:XXX</p></td></th><th><td><img src="img/8.png"><p>书名:XXX</p><p>售价:XXX</p></td></th><th><td><img src="img/9.png"><p>书名:XXX</p><p>售价:XXX</p></td></th><th><td><img src="img/10.png"><p>书名:XXX</p><p>售价:XXX</p></td></th></tr></table></div></body>
</html>

net.css

.h2{height:100%;width:100%
}
.top{background-color: aliceblue;
}
.s1{font: "微软雅黑";font-size: 20px;
}
.s2{font-size: 18px;position: absolute;right: 15px;top: 8px;
}.logodiv{}
.logo{width: 100%height: 100%
}
.s3{color: orange;float: right;position:relative;right: 10px;top:25px;font-family: "楷体";font-size:30px;}
hr {
border:0px;
border-bottom:1px solid black;
} 	
.div2{font-family: "微软雅黑";font-size: 20px;align-content: center;
}
.div3{}
.s4{float: right;position: relative;right: 10px;top: 0px;
}
.h2{color: beige;height: 50px;width: auto;background-color: orange;border-radius: 10px;
}
.s5{position: relative;left: 20px;top: 13px;
}
.div4{height: 100%;width: 100%;
}
.bottomdiv{background-color: gainsboro;
}.s6{float: right;position:relative;right: 10px;top:25px;font-family: "楷体";font-size:20px;}
.table{width: 100%height: 100%;
}
td{padding-bottom: 2px;padding-left: 50px;
}

实现效果

在这里插入图片描述

简单框架

实现效果

在这里插入图片描述
framSet.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html</title>
</head><frameset rows="100, *"><frame src="top.html" noresize="noresize"><frameset cols="200, *"><frame src="left.html" noresize="noresize"><frame src="main01.html" name="mainFrame"></frameset></frameset>
</html>

top.html

<!DOCTYPE html>
<html><head><title>top</title><meta charset="utf-8"/><style type="text/css">/* css样式 */body{background-color: #1172B5;font-family:"微软雅黑";/*margin:0px;padding:0px;*/}h1{color:#FFFFFF;letter-spacing: 5px;text-shadow: 5px 5px 5px #000;margin:21px;}</style></head><body margin="0"><h1>商城后台管理系统</h1>		</body>
</html>

left.html

<!DOCTYPE html>
<!DOCTYPE HTML>
<html><head><title>left</title><meta charset="utf-8"/><style type="text/css">/* css样式 */body{background-color: #32323A;margin: 0px;padding:0px;font-family:"微软雅黑";}div#menu_bar{font-size: 20px;color:#FFFFFF;}div#menu_bar div{border-top: 1px solid #cccccc;padding: 5px 0;text-indent: 15px;letter-spacing: 3px;}div#menu_bar div:last-child{border-bottom: 1px solid #cccccc;}div#menu_bar div:hover{background-color: #797981;}div#menu_bar div a{font-size: 20px;color:#FFFFFF;text-decoration: none;}</style></head><body margin="0"><div id="menu_bar"><div><a href="main01.html" target="mainFrame">> 书城列表</a></div><div><a href="resume.html" target="mainFrame">> 个人简历</a></div><div><a href="calculator.html" target="mainFrame">> 计算器</a></div></div>		</body>
</html>

全选反选功能

selectAll.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例--表格全选</title><style>table {border: 1px solid;margin: auto;width: 500px;}td, th {text-align: center;border: 1px solid;}.out {background-color: white;}.over {background-color: pink;}div{margin-top: 10px;text-align: center;}</style><script>window.onload = function () {//全选document.getElementById("checkAll").onclick = function () {var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = true;}}//全不选document.getElementById("unCheckAll").onclick = function () {var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = false;}}//反选document.getElementById("reCheck").onclick = function () {var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = !cbs[i].checked;}}//鼠标经过，颜色变化var trs = document.getElementsByTagName("tr");for (var i = 0; i < trs.length; i++) {trs[i].onmouseover = function () {this.className = "over";}trs[i].onmouseout = function () {this.className = "out";}}//选中顶部复选框，全选document.getElementById("firstCb").onclick = function () {var cbs = document.getElementsByName("cb");for (var i = 0; i < cbs.length; i++) {cbs[i].checked = this.checked;}}}</script>
</head>
<body>
<table><caption>学生信息表</caption><tr><td><input type="checkbox" name="cb" id="firstCb"></td><td>编号</td><td>姓名</td><td>性别</td><td>操作</td></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td></tr>
</table>
<div><input type="button" value="全选" id="checkAll"><input type="button" value="全不选" id="unCheckAll"><input type="button" value="反选" id="reCheck">
</div></body>
</html>

案例效果

在这里插入图片描述

selectAll2.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="checkbox" id="ipt" />全选<table><tr id="dx"><td><input type="checkbox" /></td><td><input type="checkbox" /></td><td><input type="checkbox" /></td></tr></table></body><script>var ipt = $("#ipt"); // 全选按钮console.log(ipt);var dx = $("#dx").querySelectorAll("input"); // 下面所有的复选框console.log(dx);// 全选按钮ipt.onclick = function () {// this.checked 它可以得到当前复选框的选中状态 如果是true 就是选中 ，如果是false 就是未选中console.log(this.checked);for (var i = 0; i < dx.length; i++) {// 全选按钮赋值给所有单选按钮dx[i].checked = this.checked;}};// 2.下面复选框需要全部选中，上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击都要循环查看下面所有的复选框是否没有选中 如果有一个没被选中的，上面全选就不选中for (var i = 0; i < dx.length; i++) {dx[i].onclick = function () {// flag 控制全选按钮是否选中var flag = true;// 每次点击下面的复选框都要循环检查这4个小按钮是否被选中for (var i = 0; i < dx.length; i++) {// 这个取反意思是，如果有一个没被选中就进去把flag变成false，然后flag给全选框，全选框不变if (!dx[i].checked) {flag = false;}}// 全选框ipt.checked = flag;};}function $(e) {return document.querySelector(e);}</script>
</html>