js倒計時,距離某個時間的倒計時。
阿新 • • 發佈:2017-05-27
color days round end tin seconds .cn val brush
說到倒計時,是不是也就只會寫獲取驗證碼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倒計時,距離某個時間的倒計時。