javascript定时器

本文介绍了JavaScript中setTimeout和setInterval的用法,并通过实例展示了如何使用它们来操作HTML元素,包括innerHTML、innerText和outerHTML的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值