运送时间的每日倒数计时器

Posted 2023-03-16

【中文标题】运送时间的每日倒数计时器

【英文标题】：Daily Countdown Timer for Shipping hours

【发布时间】：2018-12-28 14:44:13

【问题描述】：

尝试在每日发货截止时间之前建立每日“订购时间”倒计时。 （更喜欢保留 vanilla js）- 在这个特定的应用程序上，服务器端脚本不是一个选项。

1：我正在尝试确保如何将时间设置为特定的 EST 时间（每天下午 6 点），但不确定香草 JS 是否可以这样做？

2：当计时器倒计时并且还剩不到一小时时，它看起来像 0:mm:ss - 是否可以在它为 0 时隐藏小时而只显示 mm:ss？

FIDDLE： http://jsfiddle.net/bill9000/rwet0o5f/96/

if (document.getElementById('countdownTimer')) 
    pad = function(n, len)  // leading 0's
        var s = n.toString();
        return (new Array( (len - s.length + 1) ).join('0')) + s;
    ;

    var timerRunning = setInterval(
        function countDown() 
            var now = new Date();
            if ( (now.getDay() >= 1) && (now.getDay() <= 5) )  // Monday to Friday only
                var target = 15; // 15:00hrs is the cut-off point                               -------- Trying to get 6pm EST regardless of user time zone
                if (now.getHours() < target)  // would be best if could hide the whole counter if past cutoff point each day
                    var hrs = (target - 1) - now.getHours();
                    //if (hrs < 0) hrs = 0;
                    if (hrs = 0) '';
                    var mins = 59 - now.getMinutes();
                    if (mins < 0) mins = 0;
                    var secs = 59 - now.getSeconds();
                    if (secs < 0) secs = 0;
                    var str = 'Order in the next <strong>' + hrs + ':' + pad(mins, 2) + ':' + pad(secs, 2) + '</strong> to ship <strong>today</strong>.' ;
                    document.getElementById('countdownTimer').innerhtml = str;
                
            
        , 1000
    );

【问题讨论】：

对于第一个问题，这个答案可能会对您有所帮助：***.com/questions/36206260/…

如果不同的倒计时部分 > 0，则将它们存储在一个数组中。在构建 str 时，使用 .join(":") 连接数组的不同部分：if (hrs > 0) countdownParts.push(hrs); if (mins >= 0) countdownParts.push(pad(mins, 2)); if (secs >= 0) countdownParts.push(pad(secs, 2)); str = /*...*/ + countdownParts.join(":") + /*...*/;

if (hrs > 0 || mins > 0) countdownParts.push(pad(mins, 2)); ...

【参考方案1】：

最近我一直在想......（它在地球上的任何地方都有效）

const
  CountDownZone = document.querySelector('#count-down-Timer strong'),
  TimeTarget    = 15   // 15:00hrs is the cut-off point   
  ;
function pad(n, len)  // leading 0's
  let s = n.toString();
  return '0'.repeat(Math.max(len - s.length, 0)) + s;
;

var timerRunning = setInterval(countDown, 1000);

function countDown() 
  let
    localTime = new Date(),                // get your local time
    utcTime   = localTime.getUTCHours(),  // find UTC hours
    estTime   = new Date()               // create a new date object for the EST time
    ;
    estTime.setHours(utcTime-5);        // adjust it for EST hours.


  if (
     (estTime.getDay() > 0) && (estTime.getDay() < 6)       // Monday to Friday only
  && (estTime.getHours() < TimeTarget)
     ) 
                       
    let
      count_HM = [],
      hrs  = (TimeTarget - 1) - estTime.getHours(),
      mins = 59 - estTime.getMinutes(),
      secs = 59 - estTime.getSeconds()
      ;

    if (hrs > 0)              count_HM.push(hrs + ' hour(s)'); 
    if (hrs > 0 || mins > 0)  count_HM.push(pad(mins, 2)+ ' minute(s)'); 
    count_HM.push(pad(secs, 2)+ ' second(s)');

    CountDownZone.textContent = count_HM.join(' - ');
  
  else 
    document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
    clearInterval(timerRunning);
  

#count-down-Timer 
  padding: 20px 10px 20px 10px;
  background-color: #afc8c5

<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>

【参考方案2】：

您可以使用getUTC... 函数获取UTC 时间部分，然后将它们调整为您要查找的时区。您可以获取 UTC 日期，然后对其进行调整以获取 EST 时间。

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Date/getUTCDay

// create a date based on the user's timezone
d = new Date();

// get the universal time, then remove the difference between UTC and EST, to get the EST hours
elem.innerHTML = d.getUTCHours() - 5;

要隐藏日期部分，只需将部分添加到数组中并使用“：”连接，这将为您处理连接，而无需添加更多逻辑。

您也可以使用数组长度计算出正确的单位

      var arr_parts = [];
      var hrs = (target - 1) - now.getHours();
      var mins = 59 - now.getMinutes();
      var secs = 59 - now.getSeconds();

      if ( hrs ) 
        arr_parts.push( hrs );
      
      arr_parts.push( pad( mins, 2 ) );
      arr_parts.push( pad( secs, 2 ) );

      // number of parts to the countdown 
      // 3 = h:m:s
      // 2 = m:s
      // 1 = s
      part_length = arr_parts.length;

      // the biggest unit for the countdown 
      // so length of 1 means we need seconds at index 0)
      arr_units = [ 'seconds', 'minutes', 'hours' ]
      str_unit = arr_units[ part_length - 1 ];

      var str = 'Order within the next <strong>' 
        + arr_parts.join( ':' ) 
        + ' ' + str_unit
        + '</strong> to ship <strong>today</strong>.';

这是我使用的 JSfiddle 的修改版本（截止时间已更改，因此它在我上次使用小提琴时有效） http://jsfiddle.net/gwxptbfh/

【讨论】：

错误显示分钟+无需测试秒（始终显示=+无 clearInterval !!

@andreas 被带走了复制/粘贴，并不是要检查分钟和秒，根据原始问题只检查几个小时

@MrJ 我不想发布完整的解决方案并最终重构整个部分，只是用于加入 arr_parts 的 sn-p

_@ Pete 没关系，算法仍然是假的。如果 hrs = 0、mins = 0 和 secs = 7，则给出 00:07 分钟而不是 07 秒，如错误指示