动态提示能很好的提高一个网站的人性化程度。比如下载页面,很多网站都有倒数秒的功能 “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()” 点击反复调用该函数。当然,你也可以使用其他交互方式进行调用操作。