`
wanglihu
  • 浏览: 919421 次
  • 性别: Icon_minigender_1
  • 来自: 黑龙江
社区版块
存档分类

javascript定时器

 
阅读更多

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>

 

分享到:
评论

相关推荐

    Javascript定时器 一 单线程 修正

    JavaScript定时器是编程中不可或缺的一部分,它允许我们延迟或周期性地执行代码。在这个主题中,我们将深入探讨JavaScript中的定时器机制,特别是与单线程环境相关的方面。 首先,JavaScript是一种解释型、基于原型...

    Javascript定时器 一 单线程

    JavaScript定时器是编程中不可或缺的一部分,它允许我们延迟或周期性地执行代码,为Web应用程序带来动态和交互性。在JavaScript的世界里,定时器主要由`setTimeout`和`setInterval`两个函数提供。本篇文章将深入探讨...

    JavaScript定时器范例2则

    JavaScript定时器是Web开发中非常重要的一个概念,它允许开发者在特定的时间间隔内执行某段代码,从而实现动态效果或者异步操作。本篇将详细讲解两个JavaScript定时器的使用范例。 首先,我们来看看JavaScript中的...

    javascript定时器实现的蛇形文字

    JavaScript定时器实现的蛇形文字是一种有趣的编程小实验,它利用了JavaScript的动态特性来创建一个类似游戏"贪吃蛇"的文字效果。在这个程序中,字符会在页面上以蛇形移动,给人带来一种视觉上的趣味性。这个效果的...

    Javascript定时器 三 setTimeout func 0

    JavaScript定时器是编程中一种非常重要的机制,它允许我们在特定的时间间隔后执行代码。本篇文章主要探讨`setTimeout(func, 0)`这一特定用法,它在JavaScript中的作用和实际应用场景。 `setTimeout`函数是...

    Javascript定时器(二)——setTimeout与setInterval

    JavaScript定时器是编程中不可或缺的一部分,它们允许我们延迟执行代码或定期执行代码。在这个主题中,我们将深入探讨`setTimeout`和`setInterval`这两个核心定时器函数,它们在JavaScript中的应用以及它们之间的...

    【JavaScript源代码】JavaScript定时器实现限时秒杀功能.docx

    ### JavaScript定时器实现限时秒杀功能 #### 一、概述 在电商领域,限时秒杀是一种常见的促销手段,能够有效吸引用户关注并刺激购买欲望。本文将详细介绍如何使用JavaScript实现一个简单的限时秒杀功能,包括倒...

    轻松解决JavaScript定时器越走越快的问题

    JavaScript定时器在编程中起着重要的作用,它们用于在特定的时间间隔执行代码,例如实现动画效果、轮播图、计时器等。然而,当定时器的管理不当,就会遇到一个问题——定时器“越走越快”。这个问题通常发生在使用`...

    深入探寻javascript定时器

    javascript单线程 JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两...

    JavaScript定时器:`setTimeout`和`setInterval`的深入指南

    在JavaScript编程中,定时器是控制代码执行时间的一种重要机制。它们允许开发者在特定的时间后执行代码,或者按照一定的时间间隔重复执行代码。setTimeout和setInterval是JavaScript中两个基本的定时器函数,它们在...

    javascript定时器取消定时器及优化方法

    在Web开发中,JavaScript 定时器的使用非常普遍,它们允许开发者在给定的时间间隔后执行代码,或按照指定的时间间隔重复执行代码。但不当的使用定时器可能会导致性能问题,例如回调堆积,或者在不再需要定时器时未能...

    JavaScript定时器和优化的取消定时器方法

    JavaScript定时器是编程中常见的一种技术,用于在指定的时间间隔后执行特定的函数或操作。JavaScript提供了两种主要的定时器方法:`setInterval` 和 `setTimeout`。 `setInterval` 方法用于周期性地重复执行一个...

    理解javascript定时器中的单线程

    JavaScript定时器中的单线程是指JavaScript代码的执行机制,它是由一个事件驱动的单线程模型来实现的。这种模型保证了代码的顺序执行,确保了JavaScript操作的同步性。在这个模型中,JavaScript引擎是单线程的,也...

    javascript定时器完整实例

    JavaScript 定时器是该语言提供的功能之一,允许开发者按照特定的时间间隔执行代码,或者延迟执行代码。定时器有两类:`setTimeout()` 和 `setInterval()`。`setTimeout()` 用于一次性延迟执行一个函数,而 `...

    javascript定时器的简单应用示例【控制方块移动】

    JavaScript定时器是JavaScript编程中非常重要的一个概念,它允许我们延迟执行或周期性地执行某个函数。在这个示例中,我们将深入理解JavaScript定时器的工作原理,并通过一个控制方块移动的简单应用来演示其实际应用...

    JavaScript定时器制作弹窗小广告

    JavaScript定时器是JavaScript编程中一个重要的概念,它允许我们在指定的时间间隔后执行某段代码,这对于创建动态效果、实现定时任务或控制用户交互非常有用。在这个案例中,我们利用JavaScript定时器来制作一个弹窗...

    JavaScript定时器详解及实例

    JavaScript定时器是JavaScript编程中用于控制代码执行时间的工具,能够实现定时或周期性执行代码的功能。在JavaScript中,定时器主要通过window对象提供的两个方法实现:setTimeout()和setInterval()。以下是有关...

Global site tag (gtag.js) - Google Analytics