动态提示能很好的提高一个网站的人性化程度。比如下载页面,很多网站都有倒数秒的功能 “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
var int = setInterval(function() {
if (seconds > 0) { //若要倒数至0秒 seconds >= 0
document.getElementById("count-down").innerHTML = seconds; //打印秒
seconds-=1;
} else {
clearInterval(int); //防止多次累加
seconds = 4; //重置倒数秒变量
return;
}
}, 1000); //每1000毫秒=1秒钟执行一次 t54321()函数
}
</script>通过 onclick=“t54321()” 点击反复调用该函数。当然,你也可以使用其他交互方式进行调用操作。

