JavaScript 计时

最新推荐文章于 2024-11-12 11:16:35 发布

转载最新推荐文章于 2024-11-12 11:16:35 发布 · 831 阅读

文章标签：

#javascript #计时 #clearTimeout #setTimeout

本文介绍了JavaScript中的计时事件，包括如何使用setTimeout()方法在特定时间后执行代码，以及如何使用clearTimeout()方法取消已设置的计时器。通过示例展示了如何创建简单的计时器、文本计时以及无限循环计时。

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

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=0
var t
function timedCount2()
{
document.getElementById('txt2').value=c
c=c+1
t=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>