网页倒计时跳转代码实例

快乐打工仔 分类:实例代码

网页倒计时跳转代码实例属于前端实例代码,有关更多实例代码大家可以查看

本章节介绍一下如何实现网页倒计时效果,并且倒计时完成实现网页的跳转。

此效果能在一定程度上提交人性化,至少那种摸黑倒计要好的多。

代码实例如下:

<!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()一章节。

网页倒计时跳转代码实例,这样的场景在实际项目中还是用的比较多的,关于网页倒计时跳转代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容