javascript - 活动倒计时(天时分秒)
Posted Sunsin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript - 活动倒计时(天时分秒)相关的知识，希望对你有一定的参考价值。
计数时：
结束时：
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome"> 8 <title>活动倒计时示例</title> 9 </head> 10 11 <body> 12 <div class="time"> 13 <span id="day">00</span> 14 <span id="hour">00</span> 15 <span id="month">00</span> 16 <span id="second">00</span> 17 </div> 18 <script type="text/javascript"> 19 (function () { 20 // 页面加载完 21 window.onload = function () { 22 countTime(); 23 } 24 // 小于9则添加前缀：01\\02.... 25 function checkTime(_zero) { 26 return _zero > 9 ? _zero : \'0\' + _zero; 27 } 28 function countTime() { 29 30 // 截止时间. 年、月、日 时、分、秒 - 设置结束时间后 - 自动关闭计时器. 31 var dateStr = "2018/8/14 08:00:00"; 32 33 //获取当前时间 34 var date = new Date(); 35 var now = date.getTime(); 36 //设置截止时间 37 var endDate = new Date(dateStr); 38 var end = endDate.getTime(); 39 //时间差 40 var leftTime = end - now; 41 //定义变量 d,h,m,s保存倒计时的时间 42 var d, h, m, s; 43 if (leftTime >= 0) { 44 // 计天、时、分、秒 45 d = Math.floor(leftTime / 1000 / 60 / 60 / 24); 46 h = Math.floor(leftTime / 1000 / 60 / 60 % 24); 47 m = Math.floor(leftTime / 1000 / 60 % 60); 48 s = Math.floor(leftTime / 1000 % 60); 49 //将倒计时赋值到div中 50 document.getElementById("day").innerHTML = d > 9 ? d + \'天\' : checkTime(d) + "天"; 51 document.getElementById("hour").innerHTML = h > 9 ? h + \'时\' : checkTime(h) + "时"; 52 document.getElementById("month").innerHTML = m > 9 ? m + \'分\' : checkTime(m) + "分"; 53 document.getElementById("second").innerHTML = s > 9 ? s + \'秒\' : checkTime(s) + "秒"; 54 //递归每秒调用countTime方法，显示动态时间效果 55 setTimeout(countTime, 1000); 56 } else { 57 document.getElementById("day").innerHTML = "00天"; 58 document.getElementById("hour").innerHTML = "00时"; 59 document.getElementById("month").innerHTML = "00分"; 60 document.getElementById("second").innerHTML = "00秒"; 61 } 62 } 63 })(); 64 65 </script> 66 </body> 67 68 69 </html>
以上是关于javascript - 活动倒计时(天时分秒)的主要内容，如果未能解决你的问题，请参考以下文章