DOM 小练习(图片轮播与信息添加)
简易图片轮播
制作一个简易版的图片轮播,可点击按钮切换图片效果如下图所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片切换</title> <style type="text/css"> img{width: 200px;} </style> </head> <body> <!-- 基础图片 --> <img src="" id="img"> <!-- 切换按钮 --> <button id="button_top">上一张</button> <button id="button_next" >下一张</button> <script type="text/javascript"> //获取按钮与图片 var button_next = document.getElementById("button_next"); var button_top = document.getElementById("button_top"); var img = document.getElementById("img"); //图片名字数组 var qietu = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'] img.src=qietu[0]; i=0; //轮播图片 function dinshi(){ setTimeout(function(){ if (i<qietu.length-1) { i++; img.src=qietu[i]; }else{ img.src=qietu[0]; i=0; } dinshi(); },3000) } //下一张图片 button_next.onclick = function(){ if(i<qietu.length){ i++; img.src=qietu[i]; }else{ img.src=qietu[0]; i=0; } } //上一张图片 button_top.onclick = function(){ if(i>0){ i--; img.src=qietu[i]; }else{ i=qietu.length-1; img.src=qietu[i]; } } dinshi(); </script> </body> </html>
DOM 添加|删除信息
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM增删改</title> <style type="text/css"> .shu_div{ width: 200px;background-color: #999; } .shu_div input{ margin-bottom: 10px; } </style> </head> <body> <table border="1" id="zong_table"> <tr> <td>姓名</td> <td>年龄</td> <td>工资</td> <td>删除</td> </tr> </table> <div class="shu_div"> 姓名:<input type="" name="input_name" id="input_name"> 年龄:<input type="" name="input_age" id="input_age"> 工资:<input type="" name="input_nma" id="input_nma"> <button id="button_jia">添加</button> </div> <script type="text/javascript"> /* 本次小练习用到的函数 - createElement 创建元素节点,语法:var 变量 = document.createElement("元素"); - createTextNode 创建文本节点,语法:var 变量 = document.createTextNode("文本内容"); - appendChild 为元素添加一个新元素,语法:var 变量.appendChild(变量); - removeChild 删除一个子元素,语法:var 变量.removeChild(对象); - confirm 显示一个确认框,返回值为false或者true - setAttribute 定时器 */ //获取元素ID var button_jia = document.getElementById("button_jia"); //点击添加提交数据 button_jia.onclick=function(){ //获取输入框的值 var input_name = document.getElementById("input_name").value; var input_age = document.getElementById("input_age").value; var input_nma = document.getElementById("input_nma").value; var table = document.getElementById("zong_table"); var zong_table = table.getElementsByTagName('tbody')[0]; var tr = document.createElement("tr"); //创建元素节点td var td_name = document.createElement("td"); var td_age = document.createElement("td"); var td_nma = document.createElement("td"); var td_a = document.createElement("td"); //创建元素节点a var a = document.createElement("a"); //创建文本节点 var text_name = document.createTextNode(input_name); var text_age = document.createTextNode(input_age); var text_nma = document.createTextNode(input_nma); var text_a = document.createTextNode("删除"); //创建a链接的href属性 a.setAttribute("href","javascript:;"); //将文本添加到创建好的元素节点td中 td_name.appendChild(text_name); td_age.appendChild(text_age); td_nma.appendChild(text_nma); a.appendChild(text_a); td_a.appendChild(a); //将td添加到tr中 tr.appendChild(td_name); tr.appendChild(td_age); tr.appendChild(td_nma); tr.appendChild(td_a); //在将tr添加到table中 zong_table.appendChild(tr); //每次添加完成后获取删除按钮 var zong_a = document.getElementsByTagName("a"); //获得所有的删除按钮 for(var i=0; i < zong_a.length;i++){ //点击按钮删除对应的记录 zong_a[i].onclick=function(){ //获取删除对象的名字 var fu_a = this.parentNode.parentNode; var shan_name = fu_a.getElementsByTagName("td")[0].innerHTML; //确认删除 var quer = confirm("确认删除"+shan_name+"吗?"); if (quer == true) { fu_a.parentNode.removeChild(fu_a); } }; } }; </script> </body> </html>
总结
好了就这样了,由于是简易版的所有样式我就没有设置了,这是对于JS的两个小练习,代码可以直接复制使用
发表评论