javascript定时器dom节点及选项卡案例
一、定时器
1、setTimeout("fun()",time);
fun()//调用方法函数名
time//间隔多久执行一次fun(),用毫秒表示1000毫秒等于1秒
注意：只执行一次
clearTimeout();//清除setTimeout
2、setInterval("fun()",time);
fun()//调用方法函数名
time//间隔多久执行一次fun(),用毫秒表示1000毫秒等于1秒
注意：循环执行
clearInterval();//清除setInterval
//定时器案例
<body>
<div id="clock"></div>
<p>
<input type="button" value="结束!" onclick="clearTimeout(t)"/>
<input type="button" value="开始!" onclick="clock()"/>
</p>
</body>
<script type="text/javascript">
var t;
function clock(){
var div = document.getElementById("clock");
var date = new Date();
div.innerHTML = "当前时间:"+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
t = setTimeout("clock()",1000);
}
t = setTimeout("clock()",1000);
/*
clock();
function clock(){
var div = document.getElementById("clock");
var date = new Date();
div.innerHTML = "当前时间:"+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
}
var t = setInterval("clock()",1000);
*/
</script>
<script>
function titledemo(){
document.title = "更得标题";
alert(document.title);
}
</script>
<input type="button" value="更换标题" onclick="titledemo()"/>
<script>
function colordemo(){
document.bgColor = "red";
}
function clearcolor(){
document.bgColor = "";
}
</script>
<input type="button" value="更换背景色" onclick="colordemo()"/>
<input type="button" value="清除背景色" onclick="clearcolor()"/>
</html>
二、对节点的操作
1、document节点对象
我们用js操作dom对象，操作无非是增删改查，操作之前先查找节点。
document属性：
document.title;//修改title标签
document.bgColor;//修改背景色
document方法：
document.write(string);
document.createElement(tag)//创建标签节点
document.createTextNode(string)//创建文本节点
document.getElementById(id)//通过标签id找节点
document.getElementsByTagName(tag)//通过标签名找节点，反馈数组
document.getElementByName(name)//通过标签中name属性属性找节点（往往用来查找input元素）
//javascript-dom节点案例
<body>
<input type="button" value="fun1" onclick="fun1()"/>
<input type="button" value="fun2" onclick="fun2()"/>
<input type="button" value="fun3" onclick="fun3()"/>
<h1 id="id3">pcontent</h1>
<div name="div1" id="id1">
<div id="son">son</div>
</div>
<p>pcontent</p>
</body>
<script>
function fun1(){
var h = document.getElementById("id3");//找到节点
var obp = document.createElement("p");//创建标签
var obt = document.createTextNode("我是新创建的节点");//创建文本
obp.appendChild(obt);//将文本插入标签中
h.appendChild(obp);//将标签插入节点中
}
function fun2(){
var d = document.getElementsByTagName("div")[0];
//alert(d[0].innerHTML);//取出的是数组，用下标[0]可以取第一个div标签
var son = document.getElementById("son");
d.removeChild(son);
}
function fun3(){
var d = document.getElementById("id1");
//alert(d.innerHTML);
alert(d.innerText);
}
</script>
2、标签节点对象属性和方法
属性：
innerHTML;//获取该对象的文本标签所包含html，文本内容
innerText;//获取该对象的文本内容
方法：
appendChild(子节点);//在父节点中添加子节点
renoveChild(子节点);//在父节点中删除子节点
///选项卡案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript-选项卡</title>
<style>
#div1,#div2,#div3,#div4{width:500px;height:100px;border:1px solid red;}
a{font-weight:bold;font-size:30px;}
a:hover{background:red;}
</style>
</head>
<body>
<a id = "a1" href="javascript:show(1)" style="background:red;">国内</a>
<a id = "a2" href="javascript:show(2)">体育</a>
<a id = "a3" href="javascript:show(3)">游戏</a>
<a id = "a4" href="javascript:show(4)">娱乐</a>
<div id ="father">
<div id = "div1" style="display:block;">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
<div id = "div2" style="display:none;">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</div>
<div id = "div3" style="display:none;">
<ul>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
</ul>
</div>
<div id = "div4" style="display:none;">
<ul>
<li>44444</li>
<li>44444</li>
<li>44444</li>
<li>44444</li>
</ul>
</div>
</div>
</body>
<script>
function show(num){
for(var i=1;i<=4;i++){
var a = document.getElementById("a"+i);
var div = document.getElementById("div"+i);
if(i == num){
//当前节点操作
a.style.background = "red";
div.style.display= "block";
}else{
//非当前的其他元素
a.style.background = "";
div.style.display = "none";
}
}
}
</script>
</html>
