下面的代码倒计时不使用jquery

Question

下面的脚本用于倒数计时器，但它的显示仅为天、小时、分钟、秒(1d 0h0m0m050秒 )。有人能给我建议同样的解决方案吗？我改变了一切，但失败了，有人能建议我该怎么做吗？

let countdown="";
    let closingdate = "2021-08-04";
    let countDownDate = new Date(closingdate).getTime();
    let x = setInterval(function() {
    let Startingdate = "2021-08-03";
    let StartcountDownDate = new Date(Startingdate).getTime();
    let distance = countDownDate - StartcountDownDate;
    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
    $('#countdown').html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
  
    countdown = $('#countdown').html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");;     
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("countdown").innerHTML = "Closed";
        }
                                
    }, 1000);

Answer 1

倒计时的主要问题是，您总是使用开始时间而不增加任何时间。您需要在每个间隔上添加1秒才能启动时间。

下面是基于您自己的jQuery代码的工作示例：

​

let closingdate = "2021-08-04";
let countDownDate = new Date(closingdate).getTime();
let Startingdate = new Date("2021-08-03");

let x = setInterval(function () {
    Startingdate.setSeconds(Startingdate.getSeconds() + 1);
    let StartcountDownDate = Startingdate.getTime();
    let distance = countDownDate - StartcountDownDate;
    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    $('#countdown').html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

    countdown = $('#countdown').html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");;
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "Closed";
    }

}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countdown">

​

下面是使用纯JavaScript和一些新样式的新工作示例：

​

 var speed = 1;
 function getTimeRemaining(endtime, starttime) {
     starttime.setSeconds(starttime.getSeconds() + speed);
     const total = Date.parse(endtime) - Date.parse(starttime);
     const seconds = Math.floor((total / 1000) % 60);
     const minutes = Math.floor((total / 1000 / 60) % 60);
     const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
     const days = Math.floor(total / (1000 * 60 * 60 * 24));

     return {
         total,
         days,
         hours,
         minutes,
         seconds
     };
 }

 function initializeClock(id, endtime, starttime) {
     const clock = document.getElementById(id);
     const daysSpan = clock.querySelector('.days');
     const hoursSpan = clock.querySelector('.hours');
     const minutesSpan = clock.querySelector('.minutes');
     const secondsSpan = clock.querySelector('.seconds');

     function updateClock() {
         const t = getTimeRemaining(endtime, starttime);

         daysSpan.innerHTML = t.days;
         hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
         minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
         secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

         if (t.total <= 0) {
             clearInterval(timeinterval);
         }
     }

     updateClock();
     const timeinterval = setInterval(updateClock, speed * 1000);
 }

 const deadline = new Date("2021-08-04");
 const starttime = new Date("2021-08-03");
 initializeClock('clockdiv', deadline, starttime);

 h1 {
     color: #396;
     font-weight: 100;
     font-size: 40px;
     margin: 40px 0px 20px;
 }

 #clockdiv {
     font-family: sans-serif;
     color: #fff;
     display: inline-block;
     font-weight: 100;
     text-align: center;
     font-size: 30px;
 }

     #clockdiv > div {
         padding: 10px;
         border-radius: 3px;
         background: #00BF96;
         display: inline-block;
     }

     #clockdiv div > span {
         padding: 15px;
         border-radius: 3px;
         background: #00816A;
         display: inline-block;
     }

 .smalltext {
     padding-top: 5px;
     font-size: 16px;
 }

    <h1>Countdown Clock</h1>
    <div id="clockdiv">
        <div>
            <span class="days"></span>
            <div class="smalltext">Days</div>
        </div>
        <div>
            <span class="hours"></span>
            <div class="smalltext">Hours</div>
        </div>
        <div>
            <span class="minutes"></span>
            <div class="smalltext">Minutes</div>
        </div>
        <div>
            <span class="seconds"></span>
            <div class="smalltext">Seconds</div>
        </div>
    </div>

​

基于刷新页和关闭选项卡的更新

您可以使用localStorage来确保在任何刷新之后，starttime都不会重置。此外，当选项卡关闭时，您可以在localStorage中使用onbeforeunload事件保持当前时间，并在加载页面时计算浏览器关闭的时间，并将持续时间添加到starttime中。

let closingdate = "2021-08-04";
let countDownDate = new Date(closingdate).getTime();

let Startingdate = localStorage.getItem("Startingdate");
if (!Startingdate)
    Startingdate = "2021-08-03";

Startingdate = new Date(Startingdate);
var OncloseDate = localStorage.getItem("OnCloseTab");
if (OncloseDate) {
    let duration = new Date().getTime() - new Date(OncloseDate).getTime();
    Startingdate = new Date(Startingdate.getTime() + duration);
}

let x = setInterval(function () {
    Startingdate.setSeconds(Startingdate.getSeconds() + 1);
    localStorage.setItem("Startingdate", Startingdate)
    let StartcountDownDate = Startingdate.getTime();
    let distance = countDownDate - StartcountDownDate;
    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);

    $('#countdown').html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");

    countdown = $('#countdown').html(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");;
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "Closed";
    }

}, 1000);


window.onbeforeunload = function () {
    localStorage.setItem("OnCloseTab", new Date());
};