Таймер отсчета от даты

Non-Stop

Профессор
Регистрация
9 Июл 2007
Сообщения
437
Реакции
42
Доброго дня.
Есть скрипт обратного отсчета. Необходимо изменить его так, что бы он считал дни часы минуты и секунды от определенной даты..

HTML разметка​

Код:
<div id="countdown">
  <div id="tiles"></div>
  <div class="labels">
    <li>Дней</li>
    <li>Часов</li>
    <li>Минут</li>
    <li>Секунд</li>
  </div>
</div>

CSS оформление​

Код:
body{font:normal 13px/20px Arial,Helvetica,sans-serif;word-wrap:break-word;color:#eee;background:#353535}
#countdown{width:465px;height:112px;text-align:center;background:#222;background-image:-webkit-linear-gradient(top,#222,#333,#333,#222);background-image:-moz-linear-gradient(top,#222,#333,#333,#222);background-image:-ms-linear-gradient(top,#222,#333,#333,#222);background-image:-o-linear-gradient(top,#222,#333,#333,#222);border:1px solid #111;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,0.6);margin:auto;padding:24px 0;position:absolute;top:0;bottom:0;left:0;right:0}
#countdown:before{content:"";width:8px;height:65px;background:#444;background-image:-webkit-linear-gradient(top,#555,#444,#444,#555);background-image:-moz-linear-gradient(top,#555,#444,#444,#555);background-image:-ms-linear-gradient(top,#555,#444,#444,#555);background-image:-o-linear-gradient(top,#555,#444,#444,#555);border:1px solid #111;border-top-left-radius:6px;border-bottom-left-radius:6px;display:block;position:absolute;top:48px;left:-10px}
#countdown:after{content:"";width:8px;height:65px;background:#444;background-image:-webkit-linear-gradient(top,#555,#444,#444,#555);background-image:-moz-linear-gradient(top,#555,#444,#444,#555);background-image:-ms-linear-gradient(top,#555,#444,#444,#555);background-image:-o-linear-gradient(top,#555,#444,#444,#555);border:1px solid #111;border-top-right-radius:6px;border-bottom-right-radius:6px;display:block;position:absolute;top:48px;right:-10px}
#countdown #tiles{position:relative;z-index:1}
#countdown #tiles > span{width:92px;max-width:92px;font:bold 48px 'Droid Sans',Arial,sans-serif;text-align:center;color:#111;background-color:#ddd;background-image:-webkit-linear-gradient(top,#bbb,#eee);background-image:-moz-linear-gradient(top,#bbb,#eee);background-image:-ms-linear-gradient(top,#bbb,#eee);background-image:-o-linear-gradient(top,#bbb,#eee);border-top:1px solid #fff;border-radius:3px;box-shadow:0 0 12px rgba(0,0,0,0.7);margin:0 7px;padding:18px 0;display:inline-block;position:relative}
#countdown #tiles > span:before{content:"";width:100%;height:13px;background:#111;display:block;padding:0 3px;position:absolute;top:41%;left:-3px;z-index:-1}
#countdown #tiles > span:after{content:"";width:100%;height:1px;background:#eee;border-top:1px solid #333;display:block;position:absolute;top:48%;left:0}
#countdown .labels{width:100%;height:25px;text-align:center;position:absolute;bottom:8px}
#countdown .labels li{width:102px;font:bold 15px 'Droid Sans',Arial,sans-serif;color:#f47321;text-shadow:1px 1px 0 #000;text-align:center;text-transform:uppercase;display:inline-block}

JS скрипт​

Код:
var target_date = new Date().getTime() + (1000*3600*48); // установить дату обратного отсчета
var days, hours, minutes, seconds; // переменные для единиц времени
 
var countdown = document.getElementById("tiles"); // получить элемент тега
 
getCountdown();
 
setInterval(function () { getCountdown(); }, 1000);
 
function getCountdown(){
 
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
 
    days = pad( parseInt(seconds_left / 86400) );
    seconds_left = seconds_left % 86400;
          
    hours = pad( parseInt(seconds_left / 3600) );
    seconds_left = seconds_left % 3600;
          
    minutes = pad( parseInt(seconds_left / 60) );
    seconds = pad( parseInt( seconds_left % 60 ) );
 
    // строка обратного отсчета  + значение тега
    countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
}
 
function pad(n) {
    return (n < 10 ? '0' : '') + n;
}

Пните где подкостылить))
 

Вложения

  • 42.gif
    42.gif
    11,7 KB · Просмотры: 4
тут установить дату от которой считать (то есть если оставить как есть - будет считать от даты на 2 дня раньше текущей даты:(
Код:
var target_date = new Date().getTime() + (1000*3600*48); // установить дату обратного отсчета
и дальше поменять это
Код:
var seconds_left = (target_date - current_date) / 1000;
на это
Код:
var seconds_left = (current_date - target_date) / 1000;
по идее после этого должно заработать как надо
 
Задаёте дату через Date.parse(), принимает в нескольких форматах:
JavaScript:
var target_date = Date.parse('23 Feb 2023 13:00:00 GMT');
// или
var target_date = Date.parse('2023-02-23'); // полночь указанной даты
// или
var target_date = Date.parse('2023-02-23T13:00:00'); // с временем
// или
var target_date = Date.parse('2023-02-23T13:00:00+03:00'); // с часовым поясом
Ну и дальше как Nei написал, т.к. target_date теперь будем задавать в прошлом, то из current_date вычитаем target_date
 
Закрутился АдСкИй таймер! :friends:
 
Назад
Сверху