javascript实现倒计时效果
本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下
首先先写一个布局
3
2
1
用position:absolute使数字重合(display不为none时)
之后开始添加javascipt内容
window.onload=function(){ varnumbers=document.getElementById('numbers'); varnumber=numbers.getElementsByTagName('p'); vari=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隐藏,并且清除定时器,否则倘若找不到对应的元素,就会出现UncaughtTypeError:Cannotreadproperty‘style'ofundefined的错误。
至此,倒计时功能完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。