井井客

搜索

JS给定时间和ID的每天重复倒计时

JS每天重复倒计时代码,定时间和目标选择器,就可以自动开始倒计时,已经把做成了一个函数,现在传递获取目标时间的元素ID,以及目标显示的元素ID就可以反复使用了。

JS给定时间和ID的每天重复倒计时

因为做页面的时候有两处地方需要用到倒计时,并且是00:00:00这样的格式。所以去网上找了一个JS重复倒计时的代码,然后再加工一个包装成函数,就达到了可以反复调用的效果,也方便以后再添加相同的倒计时了。

代码如下:

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给定时间和ID的每天重复倒计时</title>
</head>
<body>
<script language=JavaScript> 
window.onload=function(){
	function aimsTime(aims,ele){
		var now = new Date();//当前时间
		var isjx=0;
		function GetServerTime(aimsTime){
				var d= now.getYear()+"/"+now.getMonth()+"/"+now.getDate()+ ' ' + aimsTime;//设置目标时间为节点
				var urodz = new Date(d); 
				now.setTime(now.getTime()+250); 
				days = (urodz - now) / 1000 / 60 / 60 / 24; 
				daysRound = Math.floor(days); 
				hours = (urodz - now) / 1000 / 60 / 60 - (24 * daysRound); 
				hoursRound = Math.floor(hours); 
				minutes = (urodz - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound); 
				minutesRound = Math.floor(minutes); 
				seconds = (urodz - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound); 
				secondsRound = Math.round(seconds);			 
				if((hoursRound==0 && minutesRound==0 && secondsRound==0)){//都等于0 说明过了目标时间
					isjx=1;
				}
				if(hoursRound < 10) hoursRound = '0'+ hoursRound;	//按照两位数格式显示时间
				if(minutesRound < 10) minutesRound = '0'+ minutesRound;
				if(secondsRound < 10) secondsRound = '0'+ secondsRound;
				//判断今天还是明天
				if(isjx==0 && (parseFloat(now.toTimeString().substr(0,2)+ now.toTimeString().substr(3,3).substr(0,2)+now.toTimeString().substr(6,7) )<=162959)){
				   document.getElementById(ele).innerHTML =  hoursRound + ":" + minutesRound + ":" + secondsRound; 
				}else  {
				   document.getElementById(ele).innerHTML = hoursRound + ":" + minutesRound + ":" + secondsRound; 
				}
		}
	 setInterval(function(){ GetServerTime(aims)},250);
	}
	function getOverTime(timeEle){
		return document.getElementById(timeEle).innerHTML;
	}	
	aimsTime(getOverTime('atime01'),'timeOver01')
	aimsTime(getOverTime('atime02'),'timeOver02')
}//onload结束
</script> 
<p>发布时间为<span id="atime01">12:00</span></p>
<p>剩余<span id="timeOver01">00:00:00</span>公布</p>
<p>发布时间为<span id="atime02">14:00</span></p>
<p>剩余<span id="timeOver02">00:00:00</span>公布</p>
</body>
</html>

仔细看还是比较简单的,弄成JS倒计时函数也很方便使用~

应该不用特别仔细说了,包装好,可以使用aimsTime函数,然后传递两个参数,
第一个是传参的函数,传的是目标时间,即计算的是从现在开始到这个时间还有多久,
第二个是ID名,即倒计时的时候是放置在哪个元素里面的。

因为用getElementByID比较兼容,所以获取/指定的都是元素ID,唯一性需要注意下~

文章TAG:JS

作者:井井客整理来源:互联网
本文标题:JS给定时间和ID的每天重复倒计时
本文链接:/c/22109.html

上一篇:带你更容易理解区分white-space|word-break|word-wrap三者
下一篇:浅谈HTML5如何做到语义化标签

文章分类

相关阅读

随便看看