一、故事背景：
1. 今天公司有個項目需求
2. 在前端頁面實現一個倒計時功能
3. 初步設想：后端根據需求規定一個未來的時間，前端根據當前時間進行計算
4. 然后將時間格式化，時分秒的格式
5. 時間倒計時完成，刷新頁面獲取最新的頁面
6. 最后在前端展示；大致是這樣
二、上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="js_time_txt">
</div>
<script src="./jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 倒計時
var _ordertimer = null;
var data = new Date();
var txt = $('.js_time_txt');
var buyTime = '2018-09-20 22:25:59'; //開搶時間
var nowTime = '2018-09-20 22:23:45'; //接口返回當前時間
var dateDiff = new Date(nowTime) - new Date(getnow()); //請求時間戳與本地時間戳
if (dateDiff < 0) {
dateDiff = Math.abs(dateDiff);
}
if (new Date(nowTime) > new Date(buyTime)) {
$('.time-range').hide(); //已開槍
return;
} else {
leftTimer(buyTime);
_ordertimer = setInterval(function () {
leftTimer(buyTime)
}, 1000);
}
// 獲取當前時間 xxxx/xx/xx 00:00:00
function getnow() {
var year = data.getFullYear();
var month = parseInt(data.getMonth() + 1) >= 10 ? parseInt(data.getMonth() + 1) : '0' + parseInt(data.getMonth() + 1);
var day = data.getDate();
var hours = data.getHours();
var minutes = data.getMinutes();
var seconds = data.getSeconds();
var now = year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds;
return now;
}
function leftTimer(enddate) {
var leftTime = (new Date(enddate)) - new Date + dateDiff;
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //計算剩余的天數
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //計算剩余的小時
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//計算剩余的分鍾
var seconds = parseInt(leftTime / 1000 % 60, 10);//計算剩余的秒數
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0)
txt.html(days + "天" + hours + "小時" + minutes + "分" + seconds + "秒");
if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
window.clearInterval(_ordertimer);
_ordertimer = null;
}
}
function checkTime(i) { //將0-9的數字前面加上0，例1變為01
if (i < 10) {
i = "0" + i;
}
return i;
}
})
</script>
</body>
</html>
