JavaScript1
程序员文章站
2022-06-23 14:51:13
1.JavaScript电灯开关案例 2.JavaScript轮播图案例 3.JavaScript自动跳转到首页案例 4.JavaScript动态表格案例 5.JavaScript表单全选案例 ......
1.javascript电灯开关案例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>电灯开关</title> </head> <body> <img id="light" src="img/off.gif"> <script> /* 分析: 1.获取图片对象 2.绑定单击事件 3.每次点击切换图片 * 规则: * 如果灯是开的 on,切换图片为 off * 如果灯是关的 off,切换图片为 on * 使用标记flag来完成 */ //1.获取图片对象 var light = document.getelementbyid("light"); var flag = false;//代表灯是灭的。 off图片 //2.绑定单击事件 light.onclick = function(){ if(flag){//判断如果灯是开的,则灭掉 light.src = "img/off.gif"; flag = false; }else{ //如果灯是灭的,则打开 light.src = "img/on.gif"; flag = true; } } </script> </body> </html>
2.javascript轮播图案例
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>轮播图</title> </head> <body> <img id="img" src="img/banner_1.jpg" width="100%"> <script> /* 分析: 1.在页面上使用img标签展示图片 2.定义一个方法,修改图片对象的src属性 3.定义一个定时器,每隔3秒调用方法一次。 */ //修改图片src属性 var number = 1; function fun(){ number ++ ; //判断number是否大于3 if(number > 3){ number = 1; } //获取img对象 var img = document.getelementbyid("img"); img.src = "img/banner_"+number+".jpg"; } //2.定义定时器 setinterval(fun,3000); </script> </body> </html>
3.javascript自动跳转到首页案例
<!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> /* 分析: 1.显示页面效果 <p> 2.倒计时读秒效果实现 2.1 定义一个方法,获取span标签,修改span标签体内容,时间-- 2.2 定义一个定时器,1秒执行一次该方法 3.在方法中判断时间如果<= 0 ,则跳转到首页 */ // 2.倒计时读秒效果实现 var second = 5; var time = document.getelementbyid("time"); //定义一个方法,获取span标签,修改span标签体内容,时间-- function showtime(){ second -- ; //判断时间如果<= 0 ,则跳转到首页 if(second <= 0){ //跳转到首页 location.href = "https://www.baidu.com"; } time.innerhtml = second +""; } //设置定时器,1秒执行一次该方法 setinterval(showtime,1000); </script> </body> </html>
4.javascript动态表格案例
<!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.添加: 1. 给添加按钮绑定单击事件 2. 获取文本框的内容 3. 创建td,设置td的文本为文本框的内容。 4. 创建tr 5. 将td添加到tr中 6. 获取table,将tr添加到table中 2.删除: 1.确定点击的是哪一个超链接 <a href="javascript:void(0);" onclick="deltr(this);" >删除</a> 2.怎么删除? removechild():通过父节点删除子节点 */ //1.获取按钮 /* document.getelementbyid("btn_add").onclick = function(){ //2.获取文本框的内容 var id = document.getelementbyid("id").value; var name = document.getelementbyid("name").value; var gender = document.getelementbyid("gender").value; //3.创建td,赋值td的标签体 //id 的 td var td_id = document.createelement("td"); var text_id = document.createtextnode(id); td_id.appendchild(text_id); //name 的 td var td_name = document.createelement("td"); var text_name = document.createtextnode(name); td_name.appendchild(text_name); //gender 的 td var td_gender = document.createelement("td"); var text_gender = document.createtextnode(gender); td_gender.appendchild(text_gender); //a标签的td var td_a = document.createelement("td"); var ele_a = document.createelement("a"); ele_a.setattribute("href","javascript:void(0);"); ele_a.setattribute("onclick","deltr(this);"); var text_a = document.createtextnode("删除"); ele_a.appendchild(text_a); td_a.appendchild(ele_a); //4.创建tr var tr = document.createelement("tr"); //5.添加td到tr中 tr.appendchild(td_id); tr.appendchild(td_name); tr.appendchild(td_gender); tr.appendchild(td_a); //6.获取table var table = document.getelementsbytagname("table")[0]; table.appendchild(tr); }*/ //使用innerhtml添加 document.getelementbyid("btn_add").onclick = function() { //2.获取文本框的内容 var id = document.getelementbyid("id").value; var name = document.getelementbyid("name").value; var gender = document.getelementbyid("gender").value; //获取table var table = document.getelementsbytagname("table")[0]; //追加一行 table.innerhtml += "<tr>\n" + " <td>"+id+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+gender+"</td>\n" + " <td><a href=\"javascript:void(0);\" onclick=\"deltr(this);\" >删除</a></td>\n" + " </tr>"; } //删除方法 function deltr(obj){ var table = obj.parentnode.parentnode.parentnode; var tr = obj.parentnode.parentnode; table.removechild(tr); } </script> </body>
5.javascript表单全选案例
<!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 */ //1.在页面加载完后绑定事件 window.onload = function(){ //2.给全选按钮绑定单击事件 document.getelementbyid("selectall").onclick = function(){ //全选 //1.获取所有的checkbox var cbs = document.getelementsbyname("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为选中 checked cbs[i].checked = true; } } document.getelementbyid("unselectall").onclick = function(){ //全不选 //1.获取所有的checkbox var cbs = document.getelementsbyname("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为未选中 checked cbs[i].checked = false; } } document.getelementbyid("selectrev").onclick = function(){ //反选 //1.获取所有的checkbox var cbs = document.getelementsbyname("cb"); //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态为相反 cbs[i].checked = !cbs[i].checked; } } document.getelementbyid("firstcb").onclick = function(){ //第一个cb点击 //1.获取所有的checkbox var cbs = document.getelementsbyname("cb"); //获取第一个cb //2.遍历 for (var i = 0; i < cbs.length; i++) { //3.设置每一个cb的状态和第一个cb的状态一样 cbs[i].checked = this.checked; } } //给所有tr绑定鼠标移到元素之上和移出元素事件 var trs = document.getelementsbytagname("tr"); //2.遍历 for (var 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>