电灯开关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <body> <img id="light" src="img/off.gif"> <script> // 1、获取图片对象 const light = document.getElementById("light"); let flag =false; // 2、绑定单击事件 light.onclick=function () { if (flag){ light.src="img/off.gif"; flag=false; }else { light.src="img/on.gif"; flag=true; } } </script> </body> </html>
轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <script> let number=1; function fun() { number++; // 修改图片src属性的方法 if(number>3){ number=1; } let img = document.getElementById("img"); img.src="img/banner_"+number+".jpg"; } setInterval(fun,3000); </script> </head> <body> <img id="img" src="img/banner_1.jpg" width="100%"> </body> </html>
自动开关
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转</title> <style> p{ text-align: center; } span{ color: red; } </style> </head> <body> <p> <span id="time">5</span>秒之后，自动跳转到首页... </p> <script> let second=5; function showTime() { second--; if (second<=0){ //跳转到首页 location.href="https://www.baidu.com"; } let time = document.getElementById("time"); time.innerHTML=second+""; } //设置定时器，一秒执行一次该方法 setInterval(showTime,1000); </script> </body> </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; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> </table> <script> /** * 分析 * 1、添加： * 给添加按钮绑定单击事件 * 获取文本框的内容 * 创建tr、td，设置td的文本为文本框的内容 * 将td添加到tr中 * 获取tr，将tr添加到table中 * 2、删除： * 确定点击的是哪一个超链接 * 删除 * removeChild():通过父节点，删除子节点 */ //1、获取按钮 /** document.getElementById("btn_add").onclick=function () { let id = document.getElementById("id").value; let name = document.getElementById("name").value let gender = document.getElementById("gender").value; //创建td，赋值td的标签体 let td_id = document.createElement("td"); let text_id = document.createTextNode(id); td_id.appendChild(text_id); let td_name = document.createElement("td"); let text_name = document.createTextNode(name); td_name.appendChild(text_name); let td_gender = document.createElement("td"); let text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //创建a标签的td let td_a=document.createElement("td"); let ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); ele_a.setAttribute("onclick","delTr(this);"); let text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //创建tr let tr = document.createElement("tr"); //添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //获取table let table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } */ // 使用innerHtml的方法实现 document.getElementById("btn_add").onclick=function () { let id = document.getElementById("id").value; let name = document.getElementById("name").value let gender = document.getElementById("gender").value; //获取table let table=document.getElementsByTagName("table")[0]; //追加一行 table.innerHTML+="<tr> " + " <td>"+id+"</td> " + " <td>"+name+"</td> " + " <td>"+gender+"</td> " + " <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> " + " </tr>" } //删除方法 function delTr(obj){ let table=obj.parentNode.parentNode.parentNode; let tr=obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
表格全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格全选</title> <style> table{ border: 1px solid; width: 500px; margin-left: 30%; } td,th{ text-align: center; border: 1px solid; } div{ margin-top: 10px; margin-left: 30%; } .out{ background-color: white; } .over{ background-color: pink; } </style> <script> /** 分析： 1.全选： * 获取所有的checkbox * 遍历cb，设置每一个cb的状态为选中 checked */ //在页面加载完后，绑定事件 window.onload=function () { //给全选按钮绑定单击事件 document.getElementById("selectAll").onclick=function () { //全选 let cbs = document.getElementsByName("cb"); //遍历 for ( let i=0;i<cbs.length;i++){ //设置每一个cb为选中 cbs[i].checked=true; } } document.getElementById("unSelectAll").onclick=function () { //全不选 let cbs = document.getElementsByName("cb"); //遍历 for ( let i=0;i<cbs.length;i++){ //设置每一个cb为未选中 cbs[i].checked=false; } } document.getElementById("selectRev").onclick=function () { //全选 let cbs = document.getElementsByName("cb"); //遍历 for ( let i=0;i<cbs.length;i++){ //设置每一个cb为取反 cbs[i].checked=!cbs[i].checked; } } document.getElementById("firstCb").onclick=function () { //第一个cb点击 let cbs = document.getElementsByName("cb"); //遍历 for ( let i=0;i<cbs.length;i++){ //设置每一个cb为取反 cbs[i].checked=this.checked; } } //给所以tr绑定鼠标移动到元素和移出元素 let trs = document.getElementsByTagName("tr"); //遍历 for (let i=0;i<trs.length;i++){ trs[i].onmouseover=function () { //移到元素上 this.className="over"; } trs[i].onmouseout=function () { //移出元素上 this.className="out"; } } } </script> </head> <body> <table> <caption>学生信息表</caption> <tr> <th><input type="checkbox" name="cb" id="firstCb"></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);">删除</a></td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);">删除</a></td> </tr> </table> <div> <input type="button" id="selectAll" value="全选"> <input type="button" id="unSelectAll" value="全不选"> <input type="button" id="selectRev" value="反选"> </div> </body> </html>
表单校验
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; } .rg_left{ /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ color:#FFD026; font-size: 20px; } .rg_left > p:last-child{ color:#A6A6A6; font-size: 20px; } .rg_center{ float: left; /* border: 1px solid red;*/ } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a { color:pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px ; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ width: 251px; height: 32px; border: 1px solid #A6A6A6 ; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #checkcode{ width: 110px; } #img_check{ height: 32px; vertical-align: middle; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ; } .error{ color: red; } #td_sub{ padding-left: 150px; } </style> <script> /** * 分析 * 1、给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果 * 如果都为true，则监听器返回true * 如果有一个为false，则监听器返回false * 2、定义一些方法分别校验各个表单项 * 3、给各个表单绑定onblur事件 */ window.onload=function () { //给表单绑定onsubmit事件 document.getElementById("form").onsubmit=function () { //调用用户名校验方法 //调用密码校验方法 return checkUsername() && checkPassword() && checkEmail && checkName && checkTel; } //给用户名和密码分别绑定离焦事件 document.getElementById("username").onblur=checkUsername; document.getElementById("password").onblur=checkPassword; document.getElementById("email").onblur=checkEmail; document.getElementById("name").onblur=checkName; document.getElementById("tel").onblur=checkTel; } //校验用户名 function checkUsername() { let username = document.getElementById("username").value; let reg_username=/^w{6,12}$/; let flag = reg_username.test(username); let s_username=document.getElementById("s_username"); if (flag){ s_username.innerHTML="<img width='35px' height='25px' src='image/gou.png'/>"; }else { s_username.innerHTML="用户名格式有误"; } return flag; } //校验密码 function checkPassword() { let password = document.getElementById("password").value; let reg_password=/^w{6,12}$/; let flag = reg_password.test(password); let s_password=document.getElementById("s_password"); if (flag){ s_password.innerHTML="<img width='35px' height='25px' src='image/gou.png'/>"; }else { s_password.innerHTML="密码格式有误"; } return flag; } //校验邮箱 function checkEmail() { let email = document.getElementById("email").value; let reg_email=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/; let flag = reg_email.test(email); let s_email=document.getElementById("s_email"); if (flag){ s_email.innerHTML="<img width='35px' height='25px' src='image/gou.png'/>"; }else { s_email.innerHTML="邮箱格式有误"; } return flag; } //校验姓名 function checkName() { let name = document.getElementById("name").value; let reg_name=/^[u4e00-u9fa5]{0,}$/; let flag = reg_name.test(name); let s_name=document.getElementById("s_name"); if (flag){ s_name.innerHTML="<img width='35px' height='25px' src='image/gou.png'/>"; }else { s_name.innerHTML="姓名有误"; } return flag; } //校验手机号 function checkTel() { let tel = document.getElementById("tel").value; let reg_tel=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$/; let flag = reg_tel.test(tel); let s_tel=document.getElementById("s_tel"); if (flag){ s_tel.innerHTML="<img width='35px' height='25px' src='image/gou.png'/>"; }else { s_tel.innerHTML="手机号有误"; } return flag; } </script> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定义表单 form--> <form action="#" id="form" method="get"> <table> <tr> <td class="td_left"><label for="username">用户名</label></td> <td class="td_right"> <input type="text" name="username" id="username" placeholder="请输入用户名"> <span id="s_username" class="error"></span> </td> </tr> <tr> <td class="td_left"><label for="password">密码</label></td> <td class="td_right"> <input type="password" name="password" id="password" placeholder="请输入密码"> <span id="s_password" class="error"></span> </td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"> <input type="email" name="email" id="email" placeholder="请输入邮箱"> <span id="s_email" class="error"></span> </td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"> <input type="text" name="name" id="name" placeholder="请输入姓名"> <span id="s_name" class="error"></span> </td> </tr> <tr> <td class="td_left"><label for="tel">手机号</label></td> <td class="td_right"> <input type="text" name="tel" id="tel" placeholder="请输入手机号"> <span id="s_tel" class="error"></span> </td> </tr> <tr> <td class="td_left"><label>性别</label></td> <td class="td_right"> <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td> </tr> <tr> <td class="td_left"><label for="checkcode" >验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>