我怎样才能防止这个每日倒数计时器在午夜重置？

Question

要记住的关键变量：

这设置为模拟 11:00 PM。 var bt = "23:00";
这设置为模拟 8:00 AM。 var wt = "08:00";

所需功能：

倒计时器每天早上 8:00 开始。
每晚倒计时到 11:00 下午。
然后停留在00:00:00。
早上 8:00 上午，它再次重复倒计时。
这应该永远发生。

实际发生了什么：

一切正常，除了它在午夜开始 24 小时倒计时，直到 8:00 上午。

我试过调试这个，我怀疑错误在于计算的 distance 变量，使代码认为它正在与第二天进行比较，但我不确定如何解决这个问题。

这里是 Codepen.

这是我的 JS 代码：

$(document).ready(function () {

    var bt = "23:00";  // 11:00 PM
    var wt = "08:00";  // 08:00 AM

    var dateNow = moment().format('MMM D, YYYY');
    placeHolderDate = dateNow + " " + bt;

    var timeNow = moment().format('HH:mm');

    var countDownDate = new Date(placeHolderDate).getTime();

    var countDownHourMin = (wt.split(":"));


// Update the count down every 1 second
    var x = setInterval(function () {


        // Get todays date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        $("#countDown").val(hours + ":" + minutes + ":" + seconds);

        // If the countdown is over, write some text
        if (hours === 0 && minutes === 0 && seconds === 0) {
            //clearInterval(x);
            $("#countDown").val("00:00:00");
        }

        if (hours < 0 || minutes < 0 || seconds < 0) {
            //clearInterval(x);
            $("#countDown").val("00:00:00");
        }
        var timeNow = moment().format('HH:mm');
        //console.log('Time Now:' + timeNow);
        //console.log('Wake Time:' + wt);
        if (timeNow === wt) {
            clearInterval(x);
            restartCountdown();
        }


        //console.log(hours + ":" + minutes + ":" + seconds);

    }, 1000);


    function restartCountdown() {
        //log("restartCountdown Started!");

    var bt = "23:00";  // 11:00 PM
    var wt = "08:00";  // 08:00 AM

        var dN = (moment().add(moment.duration({d: 1})).format('MMM D, YYYY'));
        console.log('dn ' + dN);

        var placeHolderDate = dN + " " + bt;
        var countDownDate = new Date(placeHolderDate).getTime();

        var countDownHourMin = (wt.split(":"));


        // Update the count down every 1 second
        var x = setInterval(function () {

            // Get todays date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            $("#countDown").val(hours + ":" + minutes + ":" + seconds);

            // If the countdown is over, write some text
            if (hours === 0 && minutes === 0 && seconds === 0) {
                //clearInterval(x);
                $("#countDown").val("00:00:00");
            }

            if (hours < 0 || minutes < 0 || seconds < 0) {
                //clearInterval(x);
                $("#countDown").val("00:00:00");
            }

            //  console.log(hours + ":" + minutes + ":" + seconds);

        }, 1000);

    }
});

Answer 1

我已经编辑了您的代码并创建了这个代码笔 https://codepen.io/anon/pen/aabjEb?editors=0010。请随意优化代码，因为我还没有做过。这个想法是检查时间是否在上午 8 点到晚上 11 点之间。如果是，则显示值，否则显示 00:00:00。此外，一旦日期发生变化，更新日期并进行相应计算

$(文档).ready(函数(){

  function countdown() {
     var bt = "23:00",  // 11:00 PM
         wt = "08:00";  // 08:00 AM


    var today = new Date(),
        dd = today.getDate(),
        mm = today.getMonth()+1,
        yyyy = today.getFullYear();

    var startTime = new Date(mm + '/' + dd + '/' + yyyy + ' ' + wt),
        endTime = new Date(mm + '/' + dd + '/' + yyyy + ' ' + bt);

    setInterval(function() {
       var now = new Date();
       var nowdd = today.getDate();
       var nowTime = now.getTime();
      if(dd !== nowdd) {
        dd = nowdd;
        var nowmm = now.getMonth() + 1,
            nowyyyy = now.getFullYear();
        startTime = new Date(dd + '/' + mm + '/' + yyyy + ' wt');
        endTime = new Date(dd + '/' + mm + '/' + yyyy + ' bt');
      }

      if(nowTime > startTime && nowTime < endTime) {
         // Find the distance between now and the count down date
            var distance = endTime - nowTime;

            // Time calculations for days, hours, minutes and seconds
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
                minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
                seconds = Math.floor((distance % (1000 * 60)) / 1000);
            $("#countDown").val(hours + ":" + minutes + ":" + seconds);
         } else {
           $("#countDown").val("00:00:00");
         }
    }, 1000);
  }
  countdown();
});

我怎样才能防止这个每日倒数计时器在午夜重置？

How can I prevent this daily countdown timer from resetting at midnight?

javascript

time

countdown

momentjs