JS----简单的倒计时

最新推荐文章于 2023-04-01 16:29:22 发布

damys

最新推荐文章于 2023-04-01 16:29:22 发布

阅读量536

点赞数

分类专栏： JScript.Jquery 文章标签： js倒计时

本文链接：https://blog.csdn.net/damys/article/details/48439165

版权

JScript.Jquery 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

注意：

图片要有10张，命名规则：0.png,1.png.....

html

<div id="time">
	<img src="style/images/0.png" alt="0" />
	<img src="style/images/0.png" alt="0" />
	<h4>天</h4>
	<img src="style/images/0.png" alt="0" />
	<img src="style/images/0.png" alt="0" />
	<h4>时</h4>
	<img src="style/images/0.png" alt="0" />
	<img src="style/images/0.png" alt="0" />
	<h4>分</h4>
	<img src="style/images/0.png" alt="0" />
	<img src="style/images/0.png" alt="0" />
	<h4>秒</h4>				
</div>

<script>
			$(function(){
				//设置倒计时：y:年，m:月，d:日
				var y = '2015';
				var m = '10';
				var d = '1';
				var img = document.getElementById("time").getElementsByTagName('img');
				
				//将单位数前补0，为两位数
				function toDouble(d){
					if(d<10)
						return '0'+d;
					else
						return ''+d;
				}
				
				//设置倒计时时间
				function oDate(){
						var oDate = new Date();						
						oDate.setFullYear(y,m-1,d);
						oDate.setHours(23);
						oDate.setMinutes(59);
						oDate.setSeconds(59);
						oDate.setMilliseconds(999);			
						return oDate;									
				}
				
				function tick(){					
					var EndTime = oDate().getTime();
					
					function getRTime(){
						var NowTime = new Date();
						var nT = EndTime - NowTime.getTime();						
						
						//从大到小获取时间，并要四舍五入
						var nD = String(Math.floor(nT/(1000*60*60*24)));
						var nH = String(Math.floor(nT/(1000*60*60))%24);
						var nM = String(Math.floor(nT/(1000*60))%60);
						var nS = String(Math.floor(nT/(1000))%60);
						
						//当倒计时时间小于当前时间，设计显示时间为：00:00:00
						if(nT < 0){
							nD=nH=nM=nS=0;
						}
						var str =  toDouble(nD) + toDouble(nH) + toDouble(nM) + toDouble(nS);	

						for(var i=0; i<img.length; i++){
							img[i].src='style/images/'+str.charAt(i)+'.png';							
						}
					}					
					getRTime()					
				}
				
				setInterval(tick,1000);
				tick();
			})
		</script>

效果：

---扩展部分

按一周自定义时间

//设置倒计时：y:年，m:月，d:日
				var n = new Date();
				var dd = n.getDay();				
				var y = n.getFullYear();
				var m = n.getMonth() + 1;
				var d = n.getDate() + (dd = dd === 0 ? dd = 0 : dd = 7-dd); 
				var img = document.getElementById("time").getElementsByTagName('img');

给秒加上类并增加效果

for(var i=0; i<img.length; i++){
	img[i].src='style/images/'+str.charAt(i)+'.png';
	img[i].className='d'+i;						
}
$(".time .d7").animate({opacity:.4}).animate({opacity:1})