Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Как добавить модуль на страницу магазина в "Режиме обслуживания" ? Хочеться чтобы выводился модуль таймер (обратный отсчёт). Не важно платный или бесплатный. 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
Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.