js倒计时,距离某个时间的倒计时。

说到倒计时,是不是也就只会写获取验证码60s倒计时,在往上是不是脑力感觉不够用,身体好像被掏空了。直接看代码,让你好代码也好。

1、

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
<script type="text/javascript">
   function GetRTime(){
       var EndTime= new Date('2017/08/12 16:00:00'); //截止时间 
       var NowTime = new Date();
       var t =EndTime.getTime() - NowTime.getTime();
       var d=Math.floor(t/1000/60/60/24);
       var h=Math.floor(t/1000/60/60%24);
       var m=Math.floor(t/1000/60%60);
       var s=Math.floor(t/1000%60);
       document.getElementById("t_d").innerHTML = d + "天";
       document.getElementById("t_h").innerHTML = h + "时";
       document.getElementById("t_m").innerHTML = m + "分";
       document.getElementById("t_s").innerHTML = s + "秒";
   }
   setInterval(GetRTime,1000);
</script>
</head>
<body>
    <div id="CountMsg" class=HotDate>
        <span id="t_d"></span>
        <span id="t_h"></span>
        <span id="t_m"></span>
        <span id="t_s"></span>
    </div>
 
</body>
</html>

  简单点的倒计时出来了

2

 来写一个这样的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
<style type="text/css">
*{
	font-style: normal;
}
 .time{
	display: inline-block;
	margin-left: 20px;
	/*padding-top: 6px;*/
}
.time i{
	background-color: #333;
	display: inline-block;
	 20px;
	height: 20px;
	margin-left: 3px;
	color: #fff;
	border-radius: 2px;
	text-align: center;
	line-height: 20px;
}
</style>
</head>
<body>
    <div class="time" ectype="time">
		<span>本场还剩   </span>
		<span class="hours"></span>
		<em>:</em>
		<span class="minutes"></span>
		<em>:</em>
		<span class="seconds"></span>
	</div> 
 
</body>
<script src="http://huo1.wordhuo.com/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	timeFun();
	
	function timeFun(){
		var data="";
		var TIMER;
			data=2017;
			reflash();
		
		 function reflash(){
			data--;
			var d=parseInt(data/60/60/24);
	       var h=parseInt(data/60/60%24);
	       var m=parseInt(data/60%60);
	       var s=parseInt(data%60);
						
			$(".time").find(".days").html(nol(d));
			$(".time").find(".hours").html(nol(h));
			$(".time").find(".minutes").html(nol(m));
			$(".time").find(".seconds").html(nol(s));
		};
		TIMER = setInterval( reflash,1000 );
		 function nol(h){
			if(h<0){
				h='<i>0</i>'+'<i>0</i>';
			}else if(h<10){
				h='<i>0</i>'+'<i>'+h+'</i>';
			}else{
				var sty=h.toString()
				h='<i>'+sty.charAt(0)+'</i>'+'<i>'+sty.charAt(1)+'</i>'
			}
			return h;
		}
	}
</script>
</html>

  

原文地址:https://www.cnblogs.com/zshno1/p/6913903.html