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

Question

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

1：我正在尝试确保如何将时间设置为特定的 EST 时间（每天下午 6 点），但不确定 vanilla 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
    );
}

Answer 1

您可以使用 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 的修改版本（截止时间已更改，所以它在我上次使用 fiddle 时有效） http://jsfiddle.net/gwxptbfh/

Answer 2

最近我一直在想...（它在地球上无处不在）

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>

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

Daily Countdown Timer for Shipping hours

javascript

timer

countdown