先来两幅图片,看看今天要写什么:
看到图片右上角是什么了么看到图片下面是什么了么
相信这个大家都不会陌生吧,那些生活中等着秒杀,等着抢小米人们,焦躁等待的你曾一秒一秒的盯着它看么,我不知道答案,可我知道有那么一批人,可能已经在心里开始一秒一秒的开始数了。这一年一度的高考也又要到了,倒计时的时间也是已经越来越小,我不知道哪些在数着考试的时间,哪些在数着毕业的时间,哪些纯粹在数着解脱的时间,呜呼哀哉,各有各路,这道路口如今也就那么着吧。
言归正传,今天来写一下倒计时,到现在来看确然是简单的很了,但是我们还是来按步骤分析下:
实现效果:
时间按“秒”减小,实现动态减小效果,这个就不多说了
实现原理:
首先我们可以要确定倒计时的时长,即最大值,然后将最大值用天、时、分或者秒进行描述,动态的每秒钟递减倒计时的最大时长,动态的效果表现出来就是随时显示当前的最大时长,最后在倒计时结束后,结束循环,停止递减。
这里要用到几个时间转换:1秒(s)=1000毫秒(ms),至于天、时、分、秒之间的转换不用说了吧
备注:setinterval的定时调用的指定周期为毫秒(ms)
代码实现:
话不多说了,上代码:
window.onload=function showDate(){ var needTime=60; var dateTime=function(){ var hour=Math.floor(needTime/(3600*60)); var minute=Math.floor((needTime/60)%60);//分的转换,/60描述被小时整除的剩余部分,%60表示整除后剩下的不能被秒整除的部分为分 var second=Math.floor(needTime%60);//无法被秒整除的就是秒数 hour<0?hour=0:hour=hour;//这个条件运算符爽吧,学了之后就没用过几次,用上去感觉简练了好多 minute<0?minute=0:minute=minute; second<0?second=0:second=second; hour.toString().length < 2 ? hstr = "0" + hour.toString() : hstr = hour; //1显示01 minute.toString().length < 2 ? mstr = "0" + minute.toString() : mstr = minute; //1显示01 second.toString().length < 2 ? sstr = "0" + second.toString() : sstr = second; //1显示01 timestr = hstr + ":" + mstr + ":" + sstr; needTime=needTime-1;//needTime--也可以; if(needTime==0){ clearInterval(dateTime); } document.getElementById("ce").innerHTML=timestr; }; window.setInterval(dateTime, 1000);//调用方法啊,一定定义了,就直接调用定的名称就行了,不用加() }; </script>
html部分就更简单了,写一个div属性id=”ce“就可以了,当然如果要是想要样式的话就单独写嘛,其实就是一个定时器的应用,还记得刚接触这行业,当时做一个图书网站,想要弄一个倒计时拍卖,找了些资料,看了好久没看懂,还感觉太麻烦了,结果...这样来看的话是不是秒表也就不在话下了呢,相同原理嘛,一个减少,一个增加.
只要不停下脚步,我们就在不停进步吧,好吧,我只能这么安慰自己...