DOM 小练习(图片轮播与信息添加)

简易图片轮播

制作一个简易版的图片轮播,可点击按钮切换图片效果如下图所示:
BR0C6I.png

<!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 添加|删除信息

可以添加用户信息与删除用户信息效果如下图:
DOM 小练习(图片轮播与信息添加)插图1

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

标签

发表评论

您必须启用javascript才能在此处查看验证码