Перейти к содержанию
JetLi

Таймер для страницы обслуживания

Рекомендуемые сообщения

Как добавить модуль на страницу магазина в "Режиме обслуживания" ? Хочеться чтобы выводился модуль таймер (обратный отсчёт). Не важно платный или бесплатный. ocStore 1.5.4.1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Доброе время суток!!!

 

Вот Вам реализация обратного отсчета времени!!!

 

1. JS (+ добавить 2-ой jquery-1.7.1.min.js)

<script type="text/javascript">
var current="<div class='prices'>Ура мы стартовали</div>"; 
var year=2013;
var month=9;
var day=21;
var hour=15; 
var minute=00;
var tz=+4;
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) {
todayy+=1900; }
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
document.getElementById('countwar').innerHTML=current;
document.getElementById('countwar').style.display="inline";
document.getElementById('countwar').style.width="300px";
document.getElementById('dday').style.display="none";
document.getElementById('dhour').style.display="none";
document.getElementById('dmin').style.display="none";
document.getElementById('dsec').style.display="none";
document.getElementById('days').style.display="none";
document.getElementById('hours').style.display="none";
document.getElementById('minutes').style.display="none";
document.getElementById('seconds').style.display="none";
return;
}
else {
document.getElementById('countwar').style.display="none";
document.getElementById('dday').innerHTML=dday;
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
}
}
countdown(year,month,day,hour,minute);
</script>

CSS (настроите на свой вкус)

.numbers, .numbers-days, .numbers-hours, .numbers-minutes, .numbers-seconds {border-style: none; padding: 0px; width: 62px; height: 42px; text-align: center; font-family: Arial; font-size: 34px; font-weight: normal; color: #FFFFFF;}
.titlewar, .titlewar-days, .titlewar-hours, .titlewar-minutes, .titlewar-seconds {border: none; padding: 0; margin: 0px 3px; width: 62px; text-align: center; font-family: Arial; font-size: 14px; font-weight: normal; color: #808080;}
#form {width: 300px; height: 80px; position:relative; margin-left:15px;}
.numbers-days {position: absolute; left: 10px; top: 21px; background:#006699;}
.numbers-hours {position: absolute; left: 80px; top: 21px; background:#FF9900;}
.numbers-minutes {position: absolute; left: 150px; top: 21px; background:#FF9900;}
.numbers-seconds {position: absolute; left: 220px; top: 21px; background:#FF9900;}
.titlewar-days {position: absolute; left: 6px; top: 70px;}
.titlewar-hours {position: absolute; left: 76px; top: 70px;}
.titlewar-minutes {position: absolute; left: 147px; top: 70px;}
.titlewar-seconds {position: absolute; left: 217px; top: 70px;}

Вставка в HTML

<div id="form">
<div class="numbers" id="countwar"></div>
<div class="numbers-days" id="dday"></div>
<div class="numbers-hours" id="dhour"></div>
<div class="numbers-minutes" id="dmin"></div>
<div class="numbers-seconds" id="dsec"></div>
<div class="titlewar-days" id="days">Дни</div>
<div class="titlewar-hours" id="hours">Часы</div>
<div class="titlewar-minutes" id="minutes">Минуты</div>
<div class="titlewar-seconds" id="seconds">Секунды</div>
</div>

Как установить дату

 

В JS правим следующее

var year=2013;
var month=9;
var day=21;
var hour=15; 
var minute=00;
var tz=+4;

Внимание!!! если обратите внимание на последнюю строчку (tz=+4) таймзона для МСК... на сайте (http://www.timezone.ru/) найдите свой город и выставите свою таймзону... Надеюсь всем понятно для чего эта фишка))) чтоб часики тикали у всех одинаково)))

 

Пример реализации = http://pro100max.ru/timer/timer.html

 

Надеюсь никого не утомил)))) Удачи...

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Том спасибо, но этот вариант отпал. Т.к сайт рассчитан на латышскую публику))

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

localhost, большое спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

localhost, большое спасибо.

Да не за что ....Для этого и существуют форумы.....

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.