一篇文章带你学会JavaScript计时事件攻略

JavaScript计时事件介绍

JavaScript计时事件指的是js脚本在页面中实现计时功能。该功能广泛应用于网站中的倒计时、计时器等场景。JS计时事件的主要实现方式有setTimeout()和setInterval()两种方式。

setTimeout()

setTimeout()是一种延时执行的方法，可支持在指定时间后执行一次函数操作。使用该方法可实现倒计时等需要唤起一次的事件。

具体语法如下：

setTimeout(function, milliseconds);

function：必选参数，在指定时间后需要执行的函数。
milliseconds：必选参数，指定延时的毫秒数。

示例：

下面的示例中，我们使用setTimeout()方法实现了一个简单的10秒倒计时功能。

<script>
var seconds = 10;
function countDown() {
    seconds--;
    if (seconds >= 0) {
        setTimeout('countDown()', 1000);
        document.getElementById('countTime').innerHTML = seconds;
    }
    else {
        alert('时间到！');
    }
}
</script>
<body onload="countDown()">
<h1>倒计时</h1>
<p>离考试结束还有<span id="countTime"></span>秒</p>
</body>

setInterval()

setInterval()方法可实现循环调用，以达到循环执行某一操作的效果。使用该方法，可实现实时倒计时、实时加载等场景。

具体语法如下：

setInterval(function, time);

function：必选参数，指定在给定时间间隔内要调用的函数。
time：必选参数，指定函数调用之间的时间间隔，以毫秒为单位。

示例：

下面的示例中，我们使用setInterval()方法实现了一个每秒更新的实时时钟功能。

<script>
function getTime() {
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    h = checkTime(h);
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById("showTime").innerHTML = h + ":" + m + ":" + s;
    t = setTimeout(function(){ getTime() }, 1000);
}
function checkTime(i) {
    if (i < 10) { i = "0" + i };
    return i;
}
</script>
<body onload="getTime()">
<h1>实时时钟</h1>
<p>当前时间：<span id="showTime"></span></p>
</body>