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

Posted HUI

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
	width: 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>

  

 

以上是关于js倒计时,距离某个时间的倒计时。的主要内容,如果未能解决你的问题,请参考以下文章

JS倒计时——天时分秒

JS或者PHP的倒计时程序代码

原生js实现倒计时

原生js处理倒计时小实例

JavaScript计算日期差时间差倒计时距离未来节日倒计时放假倒计时

js如何设置一个倒计时