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）我们需要使用day，而不是在end的定义中使用now.getDate()。 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

沿着以下方向做的事：

import java.util.*;

public class Question {

public static void main(String[] args) {
    Scanner input = new Scanner(System.in);
    int[] arr = {1,2,3,3,4,5,6,1};
    int[] ne = new int[arr.length];
    ArrayList<Integer> already= new ArrayList();
    int i = 0;
    while(i<arr.length){
        if(!already.contains(arr[i]))
            already.add(arr[i]);
        i++;

    }
    System.out.println(already.toString());
    }

}

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/

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

4 个答案: