JavaScript 计时

来源：互联网发布：triz理论知乎编辑：程序博客网时间：2024/05/08 11:00

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout(): 未来的某时执行代码
clearTimeout(): 取消setTimeout()

setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

实例

当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。

简单的计时

<!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>无标题文档</title></head><body><script type="text/javascript">function timedMsg(){var t = setTimeout("alert('5秒~！')",5000)}</script><form><input type="button" value="显示定时的警告框" onClick = "timedMsg()"></form><p>请点击上面的按钮。警告框会在 5 秒后显示。</p></body></html>

效果图：

<!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>无标题文档</title></head><body><form><input type="button" value="显示计时文本" onclick="timedText()">    <input type="text" id="txt"> </form><script>function timedText(){var t1 = setTimeout("document.getElementById('txt').value='2 秒'",2000);var t2 = setTimeout("document.getElementById('txt').value='4秒'",4000);var t3 = setTimeout("document.getElementById('txt').value='6秒'",6000);}</script></body></html>

效果图：

在一个无穷循环中的计时事件

在本例中，单击开始计时按钮后，程序开始从 0 以秒计时。

<!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>无标题文档</title></head><body><form><input type="button" value="开始计时！" onClick="timedCount1()"><input type="text" id="txt1"></form><script>var c = 0;var t;function timedCount1(){document.getElementById('txt1').value=c;c=c+1;t=setTimeout("timedCount1()",1000);}</script></body></html>

效果图：

clearTimeout()

语法

clearTimeout(setTimeout_variable)

实例

下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：

<!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>无标题文档</title></head><body><script type="text/javascript">var c=0var tfunction timedCount2(){document.getElementById('txt2').value=cc=c+1t=setTimeout("timedCount2()",1000)}function stopCount(){c=0;setTimeout("document.getElementById('txt2').value=0",0);clearTimeout(t);}</script><form><input type="button" value="开始计时！" onClick="timedCount2()"><input type="text" id="txt2"><input type="button" value="停止计时！" onClick="stopCount()"></form><p>请点击上面的"开始计时"按钮来启动计时器。输入框会一直进行计时，从 0 开始。点击"停止计时"按钮可以终止计时，并将计数重置为 0。</p></body></html>

0 0