js倒计时

最新推荐文章于 2024-12-03 11:08:57 发布

shenge321

最新推荐文章于 2024-12-03 11:08:57 发布

阅读量735

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/shenge321/article/details/9404877

版权

js 专栏收录该内容

11 篇文章

订阅专栏

写了一个倒计时的列子。感觉应该没有错误。样图如下。

说说我的思路

1.先设定未来的一个时间点，

2.获取当前时间

3.计算两个时间之间的差。

使用Date.parse函数分别获取两个时间到1970/1/1午夜的毫秒数，然后相减就是两个时间之间的时间差。

这里用的是Date.parse(yyyy/mm/dd hh:mm:ss)格式取差。

4.对差进行分析，得到月日时分秒的具体数值

5.对数值分析，取得相应的png图片显示出来。

js部分

		<script type="text/javascript">
			οnlοad=function(){// 页面加载时绑定setInterval函数
				var change=function(){
					// 设定的时间：2014年7月21日 19:34:22
					var future_year="2014";
					var future_month="7";
					var future_day="21";
					var future_hours="19";
					var future_minute="34";
					var future_second="22";
					var future_date=future_year+"/"+future_month+"/"+future_day+" "+future_hours+":"+future_minute+":"+future_second;
					// 取得当前时间
					var t=new Date();
					var now_year=t.getFullYear();
					var now_month=t.getMonth()+1;
					var now_day=t.getDate();
					var now_hours=t.getHours();
					var now_minutes=t.getMinutes();
					var now_seconds=t.getSeconds();
					var now_date=now_year+"/"+now_month+"/"+now_day+" "+now_hours+":"+now_minutes+":"+now_seconds;
					// 分别获取与1970/1/1午夜的毫秒数，然后相减
					var date1=Date.parse(future_date);
					var date2=Date.parse(now_date);
					var res=date1-date2;
					// 计算月日时分秒。月采用了30为一个月。
					var month=parseInt(res/(1000*60*60*24*30));
					var day=parseInt((res-(1000*60*60*24*30)*month)/(1000*60*60*24));
					var hours=parseInt((res-(1000*60*60*24*30)*month-(1000*60*60*24)*day)/(1000*60*60));
					var minutes=parseInt((res-(1000*60*60*24*30)*month-(1000*60*60*24)*day-(1000*60*60)*hours)/(1000*60));
					var seconds=parseInt((res-(1000*60*60*24*30)*month-(1000*60*60*24)*day-(1000*60*60)*hours-(1000*60)*minutes)/1000);
					// 根据月日时分秒的位数进行相应处理
					var month_1=document.getElementById("i_month_1");
					var month_2=document.getElementById("i_month_2");
					if(month<10){
						month_1.setAttribute("src","./img/img_0.png");
						month_2.setAttribute("src","./img/img_"+month+".png");
					}else{
						var str=month.toString();
						month_1.setAttribute("src","./img/img_"+str.substring(0,1)+".png");
						month_2.setAttribute("src","./img/img_"+str.substring(1,2)+".png");
					}
					
					var day_1=document.getElementById("i_day_1");
					var day_2=document.getElementById("i_day_2");
					if(day<10){
						day_1.setAttribute("src","./img/img_0.png");
						day_2.setAttribute("src","./img/img_"+day+".png");
					}else{
						var str=day.toString();
						day_1.setAttribute("src","./img/img_"+str.substring(0,1)+".png");
						day_2.setAttribute("src","./img/img_"+str.substring(1,2)+".png");
					}
					
					var hours_1=document.getElementById("i_hours_1");
					var hours_2=document.getElementById("i_hours_2");
					if(hours<10){
						hours_1.setAttribute("src","./img/img_0.png");
						hours_2.setAttribute("src","./img/img_"+hours+".png");
					}else{
						var str=hours.toString();
						hours_1.setAttribute("src","./img/img_"+str.substring(0,1)+".png");
						hours_2.setAttribute("src","./img/img_"+str.substring(1,2)+".png");
					}
					
					var minutes_1=document.getElementById("i_minutes_1");
					var minutes_2=document.getElementById("i_minutes_2");
					if(minutes<10){
						minutes_1.setAttribute("src","./img/img_0.png");
						minutes_2.setAttribute("src","./img/img_"+minutes+".png");
						
					}else{
						var str=minutes.toString();
						minutes_1.setAttribute("src","./img/img_"+str.substring(0,1)+".png");
						minutes_2.setAttribute("src","./img/img_"+str.substring(1,2)+".png");
					}
					
					var seconds_1=document.getElementById("i_seconds_1");
					var seconds_2=document.getElementById("i_seconds_2");
					if(seconds<10){
						seconds_1.setAttribute("src","./img/img_0.png");
						seconds_2.setAttribute("src","./img/img_"+seconds+".png");
					}else{
						var str=seconds.toString();
						seconds_1.setAttribute("src","./img/img_"+str.substring(0,1)+".png");
						seconds_2.setAttribute("src","./img/img_"+str.substring(1,2)+".png");
					}
				};
				// 页面加载时执行一次，否则setInterval执行时会在加载1秒后才执行
				change();
				// 每隔一秒执行一次操作，更改img的路径。达到倒计时的效果。
				var intervalId=setInterval(change,1000);
			};
		</script>

html部分

	<body>
		<div id="title">
			倒计时
			
		</div>
		
		<div id="showimg">
			<div id="desc">
				距	2014年7月21日 19:34:22		仅剩
			</div>
			<img id="i_month_1" />
			<img id="i_month_2" />
			月
			<img id="i_day_1" class="ximg" />
			<img id="i_day_2" />
			天
			<img id="i_hours_1" class="ximg" />
			<img id="i_hours_2" />
			小时
			<img id="i_minutes_1" class="ximg" />
			<img id="i_minutes_2" />
			分钟
			<img id="i_seconds_1" class="ximg" />
			<img id="i_seconds_2" />
			秒
		</div>
		<div id="footer">
			2013年7月22日00:32:33 © 暗世界
		</div>
	</body>

完整demo地址

http://pan.baidu.com/share/link?shareid=2648512390&uk=1678659719