动态提示能很好的提高一个网站的人性化程度。比如下载页面，很多网站都有倒数秒的功能 “5..4..3..2..1秒钟后即将开始下载”等这样动态提示语。有时候的需求只需执行一次不用清零，而有时我们需要反复的执行倒数秒的功能。

利用 JavaScript 代码，可以重复实现倒数读秒功能。

核心的 JavaScript 语法是：

setInterval(code,millisec[,”lang”])

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

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

对于只需一次调用的倒数读秒：

对于下载页面，跳转页面等，只需一次倒数读秒的，可以直接使用一次性代码即可：

在需要引用的地方插入HTML代码：

<p><span id="count-down">5</span>秒钟后自动返回文章页面</p>

其次，在网页底部引用 JavaScript：

<script type="text/javascript">
var seconds = 4; //倒数5秒 4=5-1
    setInterval(function() {
    if (seconds > 0) { //若要倒数至0秒 seconds >= 0
        document.getElementById("count-down").innerHTML = seconds; //打印秒
        seconds-=1;
    } else {
        clearInterval(timer); //防止多次累加
        return;
    }
}, 1000); //每1000毫秒=1秒钟执行一次 t54321()函数 
</script>

演示 Demo

对于#需要重复调用的倒数读秒：

在需要引用的地方插入HTML代码：

<a onclick="t54321()"><span id="count-down">5</span>秒钟后自动关闭</a>

然后，在网页底部引用 JavaScript：

<script type="text/javascript">
    function t54321() {
    var seconds = 4; //倒数5秒 4=5-1
    setInterval(function() {
        if (seconds > 0) { //若要倒数至0秒 seconds >= 0
           document.getElementById("count-down").innerHTML = seconds; //打印秒
           seconds-=1;
        } else {
           clearInterval(timer); //防止多次累加
           seconds = 4; //重置倒数秒变量
           return;
        }
    }, 1000); //每1000毫秒=1秒钟执行一次 t54321()函数
 }
</script>

演示 Demo

通过 onclick=“t54321()” 点击反复调用该函数。当然，你也可以使用其他交互方式进行调用操作。

继续阅读JavaScript实现可重复倒数读秒 →