Форум

jet2 · #1 (**permalink**) 17.12.2014, 19:52

День Добрый!

Есть скрипт отсчета от заданной даты

<script type="text/javascript">
function updateCountdownClock(endDate) {
    var time = new Date();
    var endtime = new Date(endDate);
    var timemils = time.getTime();
    var endtimemils = endtime.getTime();
    if (endtimemils < timemils) {
        document.getElementById('premiertimer').innerHTML = '';
        return
    }
    var daysleft = Math.floor((endtimemils - timemils) / 1000 / 60 / 60 / 24);
    var d = daysleft - Math.floor(daysleft / 10) * 10;
    var daysleftFinal;
    var text_day;
    if (d == 1 && daysleft != 11) text_day = "день";
    else if (d > 1 && d < 5 && (daysleft < 10 || daysleft > 20)) text_day = "дня";
    else if (d >= 0) text_day = "дней";
    if (daysleft > 0) daysleftFinal = ' • ещё ' + daysleft + ' ' + text_day + '';
    else daysleftFinal = ' • сегодня';
    document.getElementById('premiertimer').innerHTML = (daysleftFinal);
    window.setTimeout("updateCountdownClock('" + endDate + "')", 1000)
}
</script>

<div id="premiertimer" class="timer"><script type="text/javascript" > updateCountdownClock ("17 Dec 2014 23:59:59")</script></div>

Подскажите пожалуйста, если не сложно. Как можно вывести его на одной странице несколько раз.

И есть ли вариант, изменить способ ввода даты в место 17 Dec 2014 =>17.12.2014

Всем спасибо!

Malleys · #2 (**permalink**) 17.12.2014, 21:52

<!doctype html>
  <html lang="ru">
    <head>
      <meta charset="utf-8">
      <script type="text/javascript">

function updateCountdownClock(element, endDate) {
    var text;
    var now = +new Date();
    var endtime = new Date();
    var match = endDate.match(/(\d{1,2})\.(\d{1,2})\.(\d{4})\s+(?:(\d{1,2})\:(\d{1,2})(?:\:(\d{1,2})))/);
    endtime.setDate(match[1]);
    endtime.setMonth(match[2] - 1);
    endtime.setFullYear(match[3]);
    endtime.setHours(match[4]);
    endtime.setMinutes(match[5]);
    endtime.setSeconds(match[6]);
    endtime = +endtime;

    var diffDays = (((((endtime/84375) >> 10) | 0) - (((now/84375) >> 10) | 0)));
    if (diffDays < 0) {
        element.innerHTML = 'Уже было';
        return;
    }

    if(diffDays%10 == 1)
      text = "Остался " + diffDays + " день";
    else if(diffDays%10 > 1 && diffDays%10 < 5 && (diffDays < 10 || diffDays > 20))
      text = "Ещё " + diffDays + " дня";
    else if(diffDays > 0)
      text = "Осталось " + diffDays + " дней";
    else
      text = "Сегодня";

    element.innerHTML = text;
}

window.onload = function() {
  var elements = document.getElementsByTagName('*');
  var timers = [];

  for(var i = 0, length = elements.length, timer, rel; i < length; i++) {
    timer = elements[i];
    rel = timer.getAttribute('rel') || '';
    if(/^timer/.test(rel)) {
      timers.push(timer);
    }
  }

  setTimeout(function() {
    for(var i = 0, length = timers.length; i < length; i++)
      updateCountdownClock(timers[i], timers[i].getAttribute('rel'));
  }, 500);
};
      </script>
    </head>
    <body>
      <div>Когда будет 17 декабря 2015? <span rel="timer[17.12.2015 12:00:00]"></span></div>
      <div>Когда наступит новый год? <span rel="timer[01.01.2015 00:00:00]"></span></div>
      <div>Когда будет 1 декабря 2014? <span rel="timer[1.12.2014 12:00:00]"></span></div>
      <div>Когда будет день рождения? <span rel="timer[02.03.2015 08:20:00]"></span></div>
    </body>
</html>

рони · #3 (**permalink**) 17.12.2014, 23:36

Malleys,
а run добавить в тег

html

Rise · #4 (**permalink**) 18.12.2014, 09:21

jet2, Malleys, а зачем обновляете данные каждую секунду?

Обновляйте с начала нового дня:

x = new Date();
x.setHours(24,0,0,0);
alert(x);

jet2 · #5 (**permalink**) 18.12.2014, 16:46

Огромное спасибо) То что нужно.
Но есть одна проблемка. Если страница отдается через Ajax, то данные не выводятся. Как можно это исправить.

Rise · #6 (**permalink**) 19.12.2014, 05:33

jet2, пример?

Форум

Справочник

Discord чат

Курсы javascript