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倒计时,距离某个时间的倒计时。的主要内容,如果未能解决你的问题,请参考以下文章