1.setTimeout():指定在一段特定事件后执行某段程序
格式:[定时器对象名=]setTimeout("<表达式>",毫秒);
实例:
<script type="text/javascript">
function display(){
//var values = document.getElementById("values").innerHTML;
var str="";
str+="I Love you!";
values.innerHTML=values.innerHTML+str+"<br/>"+Math.random()+"<br/>";
//values.innerText=values.innerText+str+"<br/>"+Math.random()+"<br/>";
//values.outerHTML=values.outerHTML+str+"<br/>"+Math.random()+"<br/>";
setTimeout('display();',4000);
}
</script>
<input type="button" value="测试" onclick="display();"/><br>
<span id="values"></span>
2.setInterval():重复执行<表达式>,直至窗口、框架被关闭或执行clearInterval方法。
格式:
[定时器对象名=]setInterval("<表达式>",毫秒);
3.clearInterval():终止定时器
格式:
clearInterval(定时器对象名)
实例:
<script type="text/javascript">
var sec = 0;
var timeId = setInterval("count();",1000);
function count(){
//document.getElementById("test").innerHTML=sec++;
test.innerHTML = sec++;
}
function stopCount(){
clearInterval(timeId);
}
</script>
<span id="test">0</span>毫秒
<input type="button" value="停止" onclick="stopCount();"/><br>
3. innerHTML、 innerText与outerHTML的区别
实例:
<div id="test">
<span style="color:red">test1</span> test2
</div>
1)innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
2)innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
3)outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
特别说明:
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签
实例:
<script type="text/javascript">
function display(){
alert("innerHTML="+values.innerHTML);
alert("innerText="+values.innerText);
alert("outerHTML="+values.outerHTML);
}
</script>
<input type="button" value="测试" onclick="display();"/><br>
<div id="values">
<span style="color:red">test1</span> test2
</div>
结果:
innerHTML=<span style="color:red">test1</span> test2
innerText=test1 test2
outerHTML=<div id="values"><span style="color:red">test1</span> test2</div>