<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时组件by TCF_JingFeng</title>
</head>
<style>
.listtime {
width: 800px;
padding: 100px 0 0 0;
font-family: fontb;
margin: 0 auto;
display: block;
}
.listtime li {
width: 50px;
float: left;
font-size: 38px;
color: #494eff;
line-height: 40px;
text-align: center;
margin-right: 6px;
list-style: none;
}
.listtime li.day {
margin-right: 6px;
}
.listtime li.hour {
margin-right: -1px;
}
.listtime li.minute {
margin-right: 1px;
}
</style>
<body>
<ul class="listtime">
<!--<li class="year">年</li>-->
<!--<li>:</li>-->
<!--<li class="month">月</li>-->
<!--<li>:</li>-->
<li class="day">日</li>
<li>:</li>
<li class="hour">时</li>
<li>:</li>
<li class="minute">分</li>
<li>:</li>
<li>秒</li>
</ul>
<ul class="listtime">
<!--<li id="year" class="year"></li>-->
<!--<li>:</li>-->
<!--<li id="month" class="month"></li>-->
<!--<li>:</li>-->
<li id="day" class="day"></li>
<li>:</li>
<li id="hour" class="hour"></li>
<li>:</li>
<li id="minute" class="minute"></li>
<li>:</li>
<li id="second"></li>
</ul>
<script>
var fnTimeCountDown = function (d, o) {
return new Promise((resolve, reject) => {
var f = {
zero: function (n) {
var n = parseInt(n, 10);
if (n > 0) {
if (n <= 9) {
n = "0" + n;
}
return String(n);
} else {
return "00";
}
},
dv: function () {
d = d || Date.UTC(2050, 0, 1, 0, 0, 0); //如果未定义时间,则设定倒计时日期是2050年1月1日0时
var future = new Date(d), now = new Date();
//现在将来秒差值
var dur = Math.round((future.getTime() - now.getTime()) / 1000) + future.getTimezoneOffset() * 60, pms = {
sec: "00",
mini: "00",
hour: "00",
day: "00",
/* month: "00",
year: "00"*/
};
if (dur > 0) {
pms.sec = Math.floor((dur)) > 0 ? f.zero(Math.floor(dur % 60)) : "00";
pms.mini = Math.floor((dur / 60)) > 0 ? f.zero(Math.floor((dur / 60)) % 60) : "00";
pms.hour = Math.floor((dur / 3600)) > 0 ? f.zero(Math.floor((dur / 3600)) % 24) : "00";
pms.day = Math.floor((dur / 86400)) > 0 ? f.zero(Math.floor((dur / 86400))) : "00";
/* //月份,以实际平均每月秒数计算
pms.month = Math.floor((dur / 2629744)) > 0 ? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
//年份,按按回归年365天5时48分46秒算
pms.year = Math.floor((dur / 31556926)) > 0 ? Math.floor((dur / 31556926)) : "00";*/
}
if (pms.day == "00" && pms.hour == "00" && pms.mini == "00" && pms.sec == "00") {
resolve("结束了")
}
return pms;
},
ui: function () {
if (o.sec) {
o.sec.innerHTML = f.dv().sec;
}
if (o.mini) {
o.mini.innerHTML = f.dv().mini;
}
if (o.hour) {
o.hour.innerHTML = f.dv().hour;
}
if (o.day) {
o.day.innerHTML = f.dv().day;
}
/* if (o.month) {
o.month.innerHTML = f.dv().month;
}
if (o.year) {
o.year.innerHTML = f.dv().year;
}*/
setTimeout(f.ui, 1000);
}
};
f.ui();
})
};
</script>
<script>
// 倒计时
var djs = {
$: function (id) {
return document.getElementById(id);
},
futureDate: Date.UTC(2022, 0, 0, 0, 0, 0),//年,月0 ~ 11,日1 ~ 31,时 0 ~ 23,分0 ~ 59,秒0 ~ 59,毫秒0 ~ 999
obj: function () {
return {
sec: djs.$("second"),
mini: djs.$("minute"),
hour: djs.$("hour"),
day: djs.$("day"),
/* month: djs.$("month"),
year: djs.$("year")*/
}
}
};
fnTimeCountDown(djs.futureDate, djs.obj()).then((data) => {
console.log(data);
//结束回调函数
});
</script>
</body>
</html>
拿来即用的网页倒计时组件
猜你喜欢
转载自blog.csdn.net/TCF_JingFeng/article/details/103936267
今日推荐
周排行