Jump to content
Sign in to follow this  
JetLi

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.