倒計時2（小於0時的格式）
阿新 • • 發佈：2018-02-08
word 16px 活動 ont 倒計時 doctype type bsp 分享圖片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒計時4不用引入插件</title> <style type="text/css"> * { margin: 0; padding: 0; } /*倒計時 模塊*/ .count_down { overflow: hidden; background: #fff; padding-bottom: 30px; } .cd_words { color: #fff; font-size: 18px; text-align: center; width: 100%; text-shadow: 0 0 2px #000; padding-top: 10px; } .cd_date { display: inline-block; color: #fff; width: 100%; box-sizing: border-box; padding-top: 5px; text-align: center } .cd_day { color: #f7cf93; width: 100%; text-align: center; } .cd_day span { font-size: 30px; color: #fd9800; font-weight: 700; padding: 0 5px; display: inline-block; } .cd_bottom { font-size: 14px; background-color: #c51216; border-radius: 5px; width: 200px; height: 40px; line-height: 40px; margin: 10px auto; color: #fff; text-align: center; } .cd_time { display: inline-block; vertical-align: top; } .cd_time span { background-color: #fff; border-radius: 3px; color: #6e4200; width: 30px; height: 30px; line-height: 30px; text-align: center; display: inline-block; font-size: 16px; margin: 5px 3px 0; vertical-align: top; } </style> </head> <body> <div class="count_down"> <p class="cd_day ">還有<span id="t_d ">loading...</span>天</p> <div class="cd_bottom "> <div class="cd_time "><span id="t_h ">loading...</span>時</div> <div class="cd_time "><span id="t_m ">loading...</span>分</div> <div class="cd_time "><span id="t_s ">loading...</span>秒</div> </div> </div> <script type="text/javascript "> function GetRTime() { var timer; var EndTime = new Date(‘2019/02/09 16:46:00‘); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); //判斷活動結束後時間顯示為0 if (t > 0) { 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); // 小於0的時候，格式00:00:00 function isZero(num) { return num < 10 ? ‘0‘ + num : num; } document.getElementById("t_d ").innerHTML = isZero(d); document.getElementById("t_h ").innerHTML = isZero(h); document.getElementById("t_m ").innerHTML = isZero(m); document.getElementById("t_s ").innerHTML = isZero(s); } else { document.getElementById("t_d ").innerHTML = ‘00‘; document.getElementById("t_h ").innerHTML = ‘00‘; document.getElementById("t_m ").innerHTML = ‘00‘; document.getElementById("t_s ").innerHTML = ‘00‘; clearInterval(timer); } } setInterval(GetRTime, 0); </script> </body> </html>
效果圖：
倒計時2（小於0時的格式）