Таймер ежедневного обратного отсчета для доставки часов - PullRequest
Новая
       72

Таймер ежедневного обратного отсчета для доставки часов

0 голосов
/ 28 декабря 2018

Попытка построить ежедневный обратный отсчет «до заказа» до ежедневного времени доставки.(предпочитаю использовать vanilla js) - в этом конкретном приложении сценарии на стороне сервера недоступны.

1: я пытаюсь убедиться, как установить время для определенного времени EST (6 вечера ежедневно) ине уверен, что это возможно с vanilla JS?

2: когда таймер начинает обратный отсчет и уходит меньше часа, он выглядит как 0: мм: сс - можно ли просто скрыть час, когда он равен 0и только показать мм: сс?

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
    );
}

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

в последнее время я думал ... (это работает везде на земле) 

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>
0 голосов
/ 28 декабря 2018

Вы можете использовать функции 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/

...