文章来源:http://www.w3school.com.cn/js/js_timing.asp
JavaScript 计时事件
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
提示:1000 毫秒等于一秒。
实例
当下面这个例子中的按钮被点击时,一个提示框会在5秒中后弹出。
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
实例 - 无穷循环
要创建一个运行于无穷循环中的计时器,我们需要编写一个函数来调用其自身。在下面的例子中,当按钮被点击后,输入域便从 0 开始计数。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
clearTimeout()
语法
clearTimeout(setTimeout_variable)
实例
下面的例子和上面的无穷循环的例子相似。唯一的不同是,现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器:
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
分享到:
相关推荐
JavaScript计时器是Web开发中一种重要的功能,允许开发者在特定的时间间隔之后执行代码,而不是在代码执行时立即运行。计时器分为两种类型:一次性计时器和间隔性触发计时器。 一次性计时器指的是只在指定的延迟...
没有 JavaScript 计时器的自动播放轮播 - CSS 动画
"JavaScript实现计时器"这个主题涉及到JavaScript编程中的一个常见任务:创建一个可以随着时间流逝更新的计时器。计时器在各种网页应用中都有广泛的应用,如倒计时、实时显示时间等。下面我们将深入探讨如何使用...
javascript简单的编写的时间计时器
在这个场景中,我们关注的是如何利用JavaScript来实现一个计时器秒表功能,这通常用于游戏、测试或者任何需要实时时间追踪的应用。 在JavaScript中,`setTimeout()`函数是一个核心的异步编程工具,它可以安排一个...
本文档通过详细的解释和案例,使得读者能够对JavaScript计时器有全面的了解。计时器在网页动态效果以及定时任务执行方面具有非常重要的作用。它们是实现Web应用中各种交互和数据处理不可或缺的工具。希望读者通过这...
首先,让我们深入了解JavaScript计时器的工作原理。 JavaScript提供了两个内置的定时器函数:`setTimeout()` 和 `setInterval()`。`setTimeout()` 用于在指定的毫秒数后执行一次函数,而 `setInterval()` 则会周期...
首先,我们要理解JavaScript计时器的工作原理。在JavaScript中,`setInterval`和`setTimeout`函数是实现定时任务的核心。`setInterval`用于周期性地执行某段代码,而`setTimeout`则会在指定时间后执行一次。在这个...
本文将深入探讨JavaScript计时器的使用方法、相关API以及常见应用场景。 一、JavaScript计时器类型 JavaScript提供了两种主要的计时器类型: 1. `setTimeout()`: 这个函数用于在指定的毫秒数后调用一个函数或执行...
JavaScript秒表计时器是一种基于Web的计时工具,它利用JavaScript语言的特性和功能来实现计时功能,用户可以通过JavaScript代码控制计时器的启停。在网页开发中,这种计时器常用于游戏、在线测试或者任何需要精确...
计时器简单轻量级的 javascript 计时器开始在需要的地方包含 timer.min.js。 创建一个定时器实例:timer = new Timer ( < callback> , < instance> ); 调用 timer.start(duration) 函数。 每隔几秒,就会调用 ...
2. **JavaScript计时器原理**:计时器功能通常由JavaScript的`setInterval()`或`setTimeout()`函数实现。在这个Demo中,倒计时和正计时可能通过这两个函数进行控制,`setInterval()`用于周期性执行某段代码,而`...
总之,这个简单的JavaScript计时器实例展示了如何结合DOM操作、事件处理、定时器和变量管理来创建动态的用户界面。它是一个基础的交互式网页应用,有助于理解JavaScript在实际网页开发中的应用。
JavaScript计时器是Web开发中常见的一种功能,用于实现时间的动态显示,如倒计时、定时执行任务等。在HTML、CSS和JavaScript这三种基本技术的组合中,JavaScript是负责处理动态效果和用户交互的核心部分。在这个名为...
一个可以绑定到任何 DOM 对象的 Javascript 计时器。 介绍 需要在您的页面上显示计时器吗? 我会说这是一个非常普遍的必需品。 实现自己的计时器当然很容易; 另外有很多方法可以实现这一点! 只有一个常量:您必须...
JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味...
在JavaScript编程语言中,计时器是一个非常常用的功能,它被广泛应用于网页动态效果、游戏、...通过解析和理解这些文件,我们可以学习到JavaScript计时器的实现原理,以及如何结合C++和MFC进行Windows应用程序开发。
**JSTimer: 构建高效JavaScript计时器** 在前端开发中,计时器是不可或缺的工具,用于实现各种动态效果、定时执行任务或跟踪性能。`JSTimer`是一个简单易用的JavaScript计时器库,由Patrick Traeger创建,它允许...
综上所述,实现一个准确的JavaScript计时器,需要结合`requestAnimationFrame`,合理管理状态,注意处理时间差,并且考虑到性能和UI流畅性。通过这样的方法,我们可以创建出适应各种应用场景的高效计时器。在实际...