大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

javascript实现倒计时效果的方法

这篇文章主要介绍javascript实现倒计时效果的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

木兰网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联成立与2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联

具体内容如下

首先先写一个布局






 
 



 
  

3

  

2

  

1

 

javascript实现倒计时效果的方法

用position:absolute使数字重合(display不为none时)

之后开始添加javascipt内容


  window.onload = function () {
   var numbers = document.getElementById('numbers');
   var number = numbers.getElementsByTagName('p');
   var i = 0;
   number[i].style.display = 'block';
   i = 1;
   timer = setInterval(function () {
    if (i != number.length) {
     number[i - 1].style.display = 'none';
     number[i].style.display = 'block';
    } else {
     number[i - 1].style.display = 'none';
     clearInterval(timer);
    }
    i++;
   }, 1000)
  }

倒计时主要通过setInterval()来实现,每1秒刷新一次。那么问题来了,在页面加载完成后一秒,setInterval()中的内容才开始执行,倘若我们需要在打开页面后立马开始倒计时的话,就应先把3这个数字即number[0]展示出来。之后每秒需要显示相应的数字,并将前一个数字隐藏。从1开始,当i的值不为number.length的时候,都执行相同的指令。当i为number.length时,只需将number[2]即1隐藏,并且清除定时器,否则倘若找不到对应的元素,就会出现Uncaught TypeError: Cannot read property ‘style' of undefined的错误。

至此,倒计时功能完成。

javascript实现倒计时效果的方法

以上是“javascript实现倒计时效果的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站名称:javascript实现倒计时效果的方法
本文URL:http://dzwzjz.com/article/pcdoeg.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP