JS倒计时

样式

<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>

<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

<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>

</div>

JS代码

<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>

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>

记录前端html5和css3.0技术

发表评论取消回复

发表评论 取消回复

发表评论取消回复