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的两个小练习,代码可以直接复制使用
发表评论