样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .countdown div{ float:left; width: auto; height: 50px; background: #0c2345; font-size: 60px; color: #fff; line-height: 50px; text-align: center; font-weight: bold; border-radius: 5px; margin-right: 10px; padding-left:20px; padding-right:20px; } </style> |
HTML
1 2 3 4 5 6 7 8 |
<div class = "countdown"> <div id="day">00</div> <div id="hours">00</div> <div id="minutes">00</div> <div>分</div> <div id="seconds">00</div> <div>秒</div> </div> |
JS代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script> var countDownTime = { init: function(a, b, c, d, e) { this.t = a, this.d = b, this.h = c, this.m = d, this.s = e }, start: function() { var a = this; setInterval(a.timer, 1e3) }, timer: function(a) { var b, c, d, e, f, g, h; a = this.countDownTime, b = new Date, c = new Date(a.t), d = c.getTime() - b.getTime(), e = Math.floor(a.formatTime(d, "day")), f = Math.floor(a.formatTime(d, "hours")), g = Math.floor(a.formatTime(d, "minutes")), h = Math.floor(a.formatTime(d, "seconds")), a.d && (a.d.innerText = a.formatNumber(e)), a.h && (a.h.innerText = a.formatNumber(f)), a.m && (a.m.innerText = a.formatNumber(g)), a.s && (a.s.innerText = a.formatNumber(h)) }, formatNumber: function(a) { if(a<=0){a=0} return a = a.toString(), a[1] ? a : "0" + a }, formatTime: function(a, b) { switch (b) { case "day": return a / 1e3 / 60 / 60 / 24; case "hours": return a / 1e3 / 60 / 60 % 24; case "minutes": return a / 1e3 / 60 % 60; case "seconds": return a / 1e3 % 60 } } }; var day = document.getElementById('day'); var hours = document.getElementById('hours'); var minutes = document.getElementById('minutes'); var seconds = document.getElementById('seconds'); // 日 时 分 秒的dom对象 countDownTime.init('2021/01/21 14:20:00', day, hours, minutes, seconds); countDownTime.start(); </script> |