//一次性定时器// setTimeout("fun()",3000);
var id =setTimeout(fun,3000);clearTimeout(id);
function fun(){alert('boom');}//循环定时器
var interval =setInterval(fun,2000);clearInterval(interval);
2.4 案例2_轮播图
<!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>
var number =1;
function fun(){
number++;if(number >3){
number =1;}
var img = document.getElementById("img");
img.src ="img/banner_"+number+".jpg";}//定义定时器setInterval(fun,2000);</script></body></html>
<style>
div{
border:1px solid red;}
#div1{
width:200px;
height:200px;}
#div2{
width:100px;
height:100px;}
#div3{
width:100px;
height:100px;}</style></head><body><div id="div1"><div id="div2">div2</div>
div1
</div><!-- 删除子节点
1.<a href="javascript:void(0);" id="de1">删除子节点</a>2.--><input type="button" id="de1" value="删除子节点"><a href="javascript:void(0);" id="add">添加子节点</a><script>//1.获取超链接
var element_a = document.getElementById("de1");//2.绑定单击事件
element_a.onclick = function (){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);}//1.获取超链接
var add1 = document.getElementById("add");//2.绑定单击事件
add1.onclick = function (){
var div1 = document.getElementById("div1");//给div1添加子节点//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);}/*
超链接的功能：
1.可以被点击：样式
2.点击后跳转到href指定的url
保留一去除二功能：
href="javascript:void(0);"
*/
var div2 = document.getElementById("div2");
var parentNode = div2.parentNode;alert(parentNode);</script>
3.2 案例——动态表格
<!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="请输入编号" align="center"><input type="text" id="name" placeholder="请输入姓名" align="center"><input type="text" id="gender" placeholder="请输入性别" align="center"><input type="button" id="addBtn" value="添加" align="center"></div><table id="table"><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr></table><script>/*
分析：
1.添加：
1.给添加按钮绑定单击事件
2.获取文本框的内容
3.创建td，设置td的文本为文本框的内容
4.创建tr
5.将td添加到tr中
6.获取table，将tr添加到table中
2.删除：
1.确定点击的是哪一个超链接
2.怎么删除？
removeChild()
*///1.获取btn
var add_Btn = document.getElementById("addBtn");//2.绑定单击事件
add_Btn.onclick =function(){//获取每一个输入框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;//创建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);// 创建tr
var tr = document.createElement("tr");// 添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);// 获取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);}//删除方法
function delTr(obj){
var table =obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);}</script></body></html>
3.3 HTMLDOM_innerHTML
<script>// 使用innerHTML来添加//1.获取btn
var add_Btn = document.getElementById("addBtn");//2.绑定单击事件
add_Btn.onclick =function(){//获取每一个输入框的内容
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);\" οnclick=\"delTr(this);\">删除</a></td>\n"+" </tr>";}//删除方法
function delTr(obj){
var table =obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);}</script>
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
