网页倒计时跳转代码实例
网页倒计时跳转代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本章节介绍一下如何实现网页倒计时效果,并且倒计时完成实现网页的跳转。
此效果能在一定程度上提交人性化,至少那种摸黑倒计要好的多。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> window.onload=function(){ var oshow=document.getElementById("show"); function count(num,show){ function done(){ show.innerHTML="跳转倒计时:"+(num>9?num:"0"+num)+"秒"; num=num-1; if(num<0){ location.href="http://www.pipipi.net"; } setTimeout(done,1000); } done(); } count(16,oshow); } </script> </head> <body> <div id="show"></div> </body> </html>
以上代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
(2).var oshow=document.getElementById("show"),获取显示倒计时实现的元素对象。
(3).function count(num,show){},此函数实现了倒计时效果,第一个参数,是要倒计时的描述,第二个是显示倒计时的对象。
(4).function done(){},声明此函数的目的是实现递归,如果直接递归count函数的话,无法传递参数。
(5).show.innerHTML="跳转倒计时:"+(num>9?num:"0"+num)+"秒",将倒计时剩余的描述写入指定的元素,里面的三元运算符的目的是为了给个位数的描述前面加零。
(6).num=num-1,描述减一。
(7).if(num<0){location.href="http://www.pipipi.net";},当num的值小于零的时候就进行跳转。
(8).setTimeout(done,1000),每隔一秒执行一次done函数,递归调用done函数。
二.相关阅读:
(1).三元运算符参阅三元运算符用法详解一章节。
(2).innerHTML属性参阅JavaScript innerHTML一章节。
(3).setTimeout()方法参阅window.clearTimeout()一章节。
网页倒计时跳转代码实例,这样的场景在实际项目中还是用的比较多的,关于网页倒计时跳转代码实例就介绍到这了。