JavaScript 运送倒数计时器 - 重置为 0

Question

我为 JavaScript 倒数计时器获取了一些代码，并对其进行了调整以满足我的需要。请看下面的倒计时：

http://ts564737-container.zoeysite.com/shipping-timer

计时器本身的功能完美运行。问题是当计时器到达设定时间时，它将重置为 23:59。我需要倒数计时器做的是在 00:00 直到第二天，因为这可能会让那些认为他们还有整整 23 小时 59 分钟才能获得免费送货的客户感到困惑。

我想问你们的是，这种变化是否需要对代码进行完全重组，或者是否可以添加一段简单的代码来实现这一点？我对 JavaScript 的了解有限，但我正在慢慢学习。

请看下面的代码：

JavaScript：

/* JavaScript Shipping Timer (Start) */

        jQuery(document).ready(function () {
    setInterval(function () {
        var now = new Date();
        var day = now.getDay();
        var end;

        if(day >= 1 && day <= 5) {
            end = new Date(now.getYear(), now.getMonth(), day, 17,30, 0, 0);    
        } else {
            end = new Date(now.getYear(), now.getMonth(), day, 13, 0, 0, 0);
        }

        var timeleft = end.getTime() - now.getTime();
        var diff = new Date(timeleft);


        jQuery("#timeleft").html("<h1>FREE SHIPPING ENDS IN</h1>" + diff.getHours() + " Hours " + diff.getMinutes() + " Minutes " + diff.getMinutes() + " Seconds<h2>Ends at 17:30 GMT</h2>");

    }, 1000);
});

/* JavaScript Shipping Timer (End) */

CSS：

#timeleft {
    text-align: center;
    font-size: 18px;
}

#timeleft h1 {
    color: #000000;
    font-size: 20px;
    font-weight: bold;
}

#timeleft h2 {
    font-size: 14px;
    color: #002240;
    padding-top: 10px;
}

HTML：

<div id="timeleft"></div>

非常感谢您能给我的任何建议或指示。感谢您的宝贵时间。

Answer 1

以下更新解决方案

是的！就像添加这个小部分一样简单：

if(timeleft >= 0){ //so if its past the time, don't update the text
    ...
}

基本上它会检查柜台上是否还有剩余时间。如果它达到 0，那么它将停止更新文本，直到第二天。 所以你的 Javascript 变成了：

    /* JavaScript Shipping Timer (Start) */

 jQuery(document).ready(function () {
  setInterval(function () { 
    var now = new Date();
    var day = now.getDay();
    var end;

    if(day >= 1 && day <= 5) {
        end = new Date(now.getYear(), now.getMonth(), day, 17,30, 0, 0);    
    } else {
        end = new Date(now.getYear(), now.getMonth(), day, 13, 0, 0, 0);
    }

    var timeleft = end.getTime() - now.getTime();
    var diff = new Date(timeleft);

     if(timeleft >= 0){
         jQuery("#timeleft").html("<h1>FREE SHIPPING ENDS IN</h1>" + diff.getHours() + " Hours " + diff.getMinutes() + " Minutes " + diff.getMinutes() + " Seconds<h2>Ends at 17:30 GMT</h2>");
     }

  }, 1000);
});

/* JavaScript Shipping Timer (End) */

如果您还有其他问题，或者如果这不起作用，请告诉我。

更新

这是工作代码的 JSFiddle：https://jsfiddle.net/0Lcb3bdf/27/

*请注意，确保设置包括 JQuery 并在头部加载时不换行

代码不能早点运行的原因是我们在代码中出现了几个与是否显示时间的实际计算无关的错误。

1) 在end的定义中，我们需要使用now.getDate()，而不是使用day。 now.getDay() 返回星期几，所以周一到周日是 0-6，这不是我们想要的。另一方面，now.getDate() 返回月份中的哪一天。

2) now.getYear() 返回从我不知道的某个时间（可能是 1900 年？）以来已经发生了多少年的数值，因为那是.getTime() 函数是基于的。因此，例如，我相信 2016 年的 now.getYear() 现在会返回 116，或者类似的东西。另一方面，now.getFullYear() 是我们想要的，因为它将返回完整的数字年份，即 2016。

3) 显示行中的小错误，我们有两次diff.getMinutes() 而不是第二次是diff.getSeconds()

我将保留上面的原始答案，以便您可以参考旧代码以查找错误，并保留timeleft >= 0 背后的逻辑

请记住timeleft >= 0，任何在免费送货时间过后访问该网站的用户都将看不到任何消息。如果您希望他们看到时间已过，您可以选择以下两种方法之一：

if(timeleft <= 0){
    timeleft = 0; //just permanently set it at 0 if time has expired
}
jQuery(...).html(...) //follows same template, just shows 0 if time expired

或

if(timeleft >= 0){
   jQuery(...).html(...) //display normally
}
else{
   jQuery(...).html(...) //display custom message (that can be different from template) saying free shipping time has ended
}

如果您还有其他问题，或者需要做其他事情，请告诉我:)

再次更新

好的，希望这是功能齐全的版本：

https://jsfiddle.net/Teddarific/0Lcb3bdf/48/

我意识到还有一个错误。在实际计算差值时，很遗憾我们不能简单地将以毫秒为单位的差值转换为日期。我不完全确定为什么这不起作用（也许有人可以为我编辑），但在我看来，它在逻辑上没有意义，但我不太确定如何解释它。

但本质上，我们必须手动将差异转换为小时、分钟和秒，这就是我在那个小提琴中所做的更改。可能有一种方法或函数可以自动执行此操作，但我手动将其写出来以显示逻辑和不该做的。这应该是最终版本（手指交叉）

Answer 2

类似的东西：

    if (end.getTime() > now.getTime()) {
     jQuery("#timeleft").html("<h1>FREE SHIPPING ENDS IN</h1>" + diff.getHours() + " Hours " + diff.getMinutes() + " Minutes " + diff.getMinutes() + " Seconds<h2>Ends at 17:30 GMT</h2>");

    } else {
//display nothing or 0
}

Answer 3

应该有效：

jQuery(document).ready(function () {
    setInterval(function () {
        var now = new Date();
        var day = now.getDay();
        var end;

        if(day >= 1 && day <= 5) {
            end = new Date(now.getYear(), now.getMonth(), day, 17,30, 0, 0);    
        } else {
            end = new Date(now.getYear(), now.getMonth(), day, 13, 0, 0, 0);
        }

        var timeleft = end.getTime() - now.getTime();
        if (timeLeft <= 0) {
            timeLeft = 0;
        }

        var diff = new Date(timeleft);

        jQuery("#timeleft").html("<h1>FREE SHIPPING ENDS IN</h1>" + diff.getHours() + " Hours " + diff.getMinutes() + " Minutes " + diff.getMinutes() + " Seconds<h2>Ends at 17:30 GMT</h2>");

    }, 1000);
});

Answer 4

首先，在您的代码中，您使用变量day 作为月份中的日期，但它包含星期几。 检查这个Date.prototype.getDay() - MDN。

您的第二个错误是您使用的是now.getYear() 而不是now.getFullYear()：getYear 不返回全年（实际上它返回116）。

正确的JS代码是这样的。

jQuery(document).ready(function () {
  setInterval(function () {
    var now = new Date;
    var day = now.getDay(); 
    var end;

    if(day >= 1 && day <= 5)
      // Your code: end = new Date(now.getYear(), now.getMonth(), day, 17,30, 0, 0);
      end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 17, 30, 0, 0); // If you use day, your are using the day of the week instead of the current day
    else
      end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 13, 0, 0, 0); // The same as above

    var timeleft = end.getTime() - now.getTime();
    var diff = new Date(timeleft);


    if (end.getTime() > now.getTime())
      jQuery("#timeleft").html("<h1>FREE SHIPPING ENDS IN</h1>" + diff.getHours() + " Hours " + diff.getMinutes() + " Minutes " + diff.getSeconds() + " Seconds<h2>Ends at 17:30 GMT</h2>");

    else
      jQuery("#timeleft").html("<h1>YOUR MESSAGE</h2>");
  }, 1000);
});

您也可以在 JSFiddle 上测试此代码：https://jsfiddle.net/6z431qa0/2/