根據後端傳的時間前端js進行倒計時

時間 2019-12-14

原文原文鏈接

1、故事背景：html

1. 今天公司有個項目需求
2. 在前端頁面實現一個倒計時功能
3. 初步設想：後端根據需求規定一個將來的時間，前端根據當前時間進行計算
4. 而後將時間格式化，時分秒的格式
5. 時間倒計時完成，刷新頁面獲取最新的頁面
6. 最後在前端展現；大體是這樣

2、上代碼前端

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