JavaScript setTimeout() clearTimeout() 方法

最新推荐文章于 2024-01-03 16:38:47 发布

转载最新推荐文章于 2024-01-03 16:38:47 发布 · 3.6k 阅读

JavaScript 专栏收录该内容

99 篇文章

订阅专栏

本文详细介绍了HTML DOM中的setTimeout()方法及其配套的clearTimeout()方法。setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，而clearTimeout()则用于取消由setTimeout()设置的延时操作。文章通过两个实用示例展示了如何运用这两个方法实现简单的时钟和计时器功能。

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

HTML DOM setTimeout() 方法

定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。

提示和注释

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

实例1

一个时钟：

<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>

实例2

带有停止按钮的计时程序：

<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="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>

<p>
请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
</p>