记录下来，下次用，避免时间华仔重复造轮子上；
实现效果：
image.png
image.png
直接上代码吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
<div class="timer">
<!-- <span id="years">00</span>:
<span id="months">00</span>:
<span id="days">00</span>:
<span id="hours">00</span>:
<span id="minutes">00</span>:
<span id="seconds">00</span> -->
</div>
<!-- 活动倒计时 -->
<div class="photoVote-times md-default" >
<div class="photoVote-content" style="background-image:url();background-color:#ffffff;color:#333333">
<span id="hddjs" class="photoVote-conten-text">活动倒计时</span>
<span id="days" class="photoVote-time" style="background-color:#f39519;color:#ffffff">00</span><span class="photoVote-conten-unit">天</span>
<span id="hours" class="photoVote-time" style="background-color:#f39519;color:#ffffff">00</span><span class="photoVote-conten-unit">时</span>
<span id="minutes" class="photoVote-time" style="background-color:#f39519;color:#ffffff">00</span><span class="photoVote-conten-unit">分</span>
<span id="seconds" class="photoVote-time" style="background-color:#f39519;color:#ffffff">00</span><span class="photoVote-conten-unit">秒</span>
</div>
</div>
<script charset="UTF-8" src="js/timeCountDown.js"></script>
<script charset="UTF-8" src="js/jquery.min.js"></script>
<script type="text/javascript">
//结束日期
var futureDate = eval(Date.UTC(2019, 11, 27, 10, 41, 0));
fnTimeCountDown(futureDate, obj, nowDate, function () {
console.log('时间到了！');
$('#hddjs').html('<span id="hddjs" class="photoVote-conten-text">活动已结束</span>');
});
</script>
</body>
</html>
js文件：
/*
* 倒计时的实现
*/
var fnTimeCountDown = function (d, o, now, callback) {
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); //如果未定义时间，则我们设定倒计时日期是2050年1月1日
var future = new Date(d);
var nowTime = new Date(now);
//现在将来秒差值
var dur = Math.round((future.getTime() - nowTime.getTime()) / 1000), pms = {
sec: "00",
mini: "00",
hour: "00",
day: "00",
month: "00",
year: "0"
};
if (dur > 0) {
pms.sec = f.zero(dur % 60);
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)) % 30) : "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)) : "0";
}
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;
}
now = now + 1000;
if (f.dv().sec == "00" && f.dv().mini == "00" && f.dv().hour == "00" && f.dv().day == "00" && f.dv().month == "00" && f.dv().year == "0") {
if (callback) {
callback();
}
}
setTimeout(f.ui, 1000);
}
};
f.ui();
};
// 获取本机当前时间
var mydate = new Date();
// console.log(mydate.getFullYear(), parseInt(mydate.getMonth())+1, mydate.getDate(), mydate.getHours(), mydate.getMinutes(), mydate.getSeconds());
// var futureDate = eval(Date.UTC(2019, 11, 30, 12, 0, 0));
var nowDate = eval(Date.UTC(mydate.getFullYear(), parseInt(mydate.getMonth())+1, mydate.getDate(), mydate.getHours(), mydate.getMinutes(), mydate.getSeconds()));
var obj = {
sec: document.getElementById("seconds"),
mini: document.getElementById("minutes"),
hour: document.getElementById("hours"),
day: document.getElementById("days"),
months: document.getElementById("months"),
years: document.getElementById("years")
}
