javascript实现倒计时-------Day28

标签：学习记录   javascript   前端   倒计时   

先来两幅图片，看看今天要写什么：

看到图片右上角是什么了么看到图片下面是什么了么

相信这个大家都不会陌生吧，那些生活中等着秒杀，等着抢小米人们，焦躁等待的你曾一秒一秒的盯着它看么，我不知道答案，可我知道有那么一批人，可能已经在心里开始一秒一秒的开始数了。这一年一度的高考也又要到了，倒计时的时间也是已经越来越小，我不知道哪些在数着考试的时间，哪些在数着毕业的时间，哪些纯粹在数着解脱的时间，呜呼哀哉，各有各路，这道路口如今也就那么着吧。

言归正传，今天来写一下倒计时，到现在来看确然是简单的很了，但是我们还是来按步骤分析下：

实现效果：

时间按“秒”减小，实现动态减小效果，这个就不多说了

实现原理：

首先我们可以要确定倒计时的时长，即最大值，然后将最大值用天、时、分或者秒进行描述，动态的每秒钟递减倒计时的最大时长，动态的效果表现出来就是随时显示当前的最大时长，最后在倒计时结束后，结束循环，停止递减。

这里要用到几个时间转换：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“就可以了，当然如果要是想要样式的话就单独写嘛，其实就是一个定时器的应用，还记得刚接触这行业，当时做一个图书网站，想要弄一个倒计时拍卖，找了些资料，看了好久没看懂，还感觉太麻烦了，结果...这样来看的话是不是秒表也就不在话下了呢，相同原理嘛，一个减少，一个增加.

只要不停下脚步，我们就在不停进步吧，好吧，我只能这么安慰自己...

javascript实现倒计时-------Day28,布布扣,bubuko.com

javascript实现倒计时-------Day28

标签：学习记录   javascript   前端   倒计时   

原文地址：http://blog.csdn.net/marsmile_tbo/article/details/28729983