文章标题

最新推荐文章于 2024-04-22 16:59:44 发布

原创最新推荐文章于 2024-04-22 16:59:44 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了JavaScript中的setTimeout和setInterval函数的使用方法，并通过实例演示了如何利用这些函数实现延时和周期性的操作，同时展示了如何使用clearInterval来停止周期性执行。

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

setTimeout(function(){ alert("Hello"); }, 3000);

案例：

<body>

<p>点击按钮，3 秒后会弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(alertFunc, 3000);
}

function alertFunc() {
  alert("Hello!");
}
</script>

</body>

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval(function(){ alert("Hello"); }, 3000);

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

myVar = setInterval("javascript 函数", milliseconds);

案例：显示当前时间 ( setInterval() 函数会每秒执行一次函数，类似手表)。使用 clearInterval() 来停止执行:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>显示当前时间:</p>

<p id="demo"></p>

<button onclick="myStopFunction()">停止时间</button>

<script>
var myVar = setInterval(function(){ myTimer() }, 1000);

function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
}

function myStopFunction() {
    clearInterval(myVar);
}
</script>

</body>
</html>

在div中显示本地实时时间

    <body>
<script language="Javascript" type="text/javascript"> 
setInterval("timer.innerHTML=new Date().toLocaleString()"); 
//在div中显示本地实时时间
</script>
<div id="timer">
</div>
    </body>