2 таймера на одной странице

Статус
В этой теме нельзя размещать новые ответы.
Denis_Pi

Denis_Pi

Art сreator
Заблокирован
Регистрация
8 Май 2012
Сообщения
405
Реакции
240
  • Автор темы
  • Заблокирован
  • #1
Не вкуриваю в чём дело...
Подключаю таймер отсчёта времени к странице...

Код: 
<div class="action-timer">
<span class="title-timeactions">до конца акции осталось</span>
<div id="form">
<div class="numbers" id="countwar"></div>
<img alt="" src="./images/backtim.png"class="bacgtimer-day"><div class="numbers-days" id="dday"></div>
<img alt="" src="./images/backtim.png"class="bacgtimer-hour"><div class="numbers-hours" id="dhour"></div>
<img alt="" src="./images/backtim.png"class="bacgtimer-min"><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>

<script type="text/javascript">
var current="";
var year=2013;
var month=9;
var day=28;
var hour=18;
var minute=00;
var tz=+8;
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)",60);
}
}
countdown(year,month,day,hour,minute);
</script>
</div>

Нужно подключить его, же 2-й раз - на этой же странице но в другом месте - подключаю, а ему всё равно, тупо считает только первый... второй игнорит - где косячу ?
 
2 одинаковых id-шника на одной странице не будут работать.
 
HTML: 
var first = setTimeout(function(){
    console.log( 'first' );
}, 2000);

var second = setTimeout(function(){
    console.log( 'second' );
}, 1000);

//clearTimeout( first );
//clearTimeout( second );
 
BDSG, не тот таймер.. :)
Если использовать что-то вроде такого Для просмотра ссылки Войди или Зарегистрируйся можно обойтись добавлением пары строк
Код: 
var countdown2 = document.getElementById("countdown2");

// format countdown string + set tag value
    countdown2.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";
 
esche, да я знаю, что setTimeout просто отсрочка, в отличии от счётчика setInterval (что, в общем то, понятно из названий).. дал тс возможность подумать, подсказав, как можно разделять ресурсы счетчиков (закомментированный сброс не просто так указал).. ))
 
BDSG написал(а):
дал тс возможность подумать, подсказав, как можно разделять ресурсы счетчиков (закомментированный сброс не просто так указал).. ))
Нажмите для раскрытия...
Если я правильно понял, разделять ресурсы не нужно.. Ну, т.е. цифры в обоих случаях должны быть идентичны - просто выводить их в 2 различных места (в верхней и нижней частях страницы).

p.s. Предлагаю, не гадать, а дождаться реакции ТС-а.
 
  • Автор темы
  • Заблокирован
  • #7
В общем вопрос решил сегодня утром, вчера видать уже спал на ходу....

всё оказалось гораздо проще...

цыфры можно вывести в другом месте назначив им другой id

напримр:
Код: 
<!--цифры сверху-->
document.getElementById('dday').innerHTML=dday;
document.getElementById('dhour').innerHTML=dhour;
document.getElementById('dmin').innerHTML=dmin;
document.getElementById('dsec').innerHTML=dsec;

Код: 
<!--цифры снизу-->
document.getElementById('dnday').innerHTML=dday;
document.getElementById('dnhour').innerHTML=dhour;
document.getElementById('dnmin').innerHTML=dmin;
document.getElementById('dnsec').innerHTML=dsec;

Всем спасибо за отклик... кстати скрипт рабочий
- частично писал сам...
- возможно кому то пригодится и скрипт и решение...

В общем в ходе дальнейшей работы над счётчиком заметил вот что: при приведённых мной выше манипуляциях считает и выводит оставшееся время только последний из таймеров, первый же отображает оставшееся время но пересчитывает его только при обновлении страницы...
немного подумав понял, что по мимо всего нужно задать другое значение функции...

в итоге получаем код первого счётчика
Код: 
<script type="text/javascript">
var current="";
var year=2013;
var month=9;
var day=28;
var hour=18;
var minute=00;
var tz=+8;
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('tcountwar').innerHTML=current;
document.getElementById('tcountwar').style.display="inline";
document.getElementById('tcountwar').style.width="300px";
document.getElementById('tdday').style.display="none";
document.getElementById('tdhour').style.display="none";
document.getElementById('tdmin').style.display="none";
document.getElementById('tdsec').style.display="none";
document.getElementById('tdays').style.display="none";
document.getElementById('thours').style.display="none";
document.getElementById('tminutes').style.display="none";
document.getElementById('tseconds').style.display="none";
return;
}
else {
document.getElementById('tcountwar').style.display="none";
document.getElementById('tdday').innerHTML=dday;
document.getElementById('tdhour').innerHTML=dhour;
document.getElementById('tdmin').innerHTML=dmin;
document.getElementById('tdsec').innerHTML=dsec;
setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",60);
}
}
countdown(year,month,day,hour,minute);
</script>

код второго счётчика
Код: 
<script type="text/javascript">
function dcountdown(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('tcountwar').innerHTML=current;
document.getElementById('tcountwar').style.display="inline";
document.getElementById('tcountwar').style.width="300px";
document.getElementById('tdday').style.display="none";
document.getElementById('tdhour').style.display="none";
document.getElementById('tdmin').style.display="none";
document.getElementById('tdsec').style.display="none";
document.getElementById('tdays').style.display="none";
document.getElementById('thours').style.display="none";
document.getElementById('tminutes').style.display="none";
document.getElementById('tseconds').style.display="none";
return;
}
else {
document.getElementById('dcountwar').style.display="none";
document.getElementById('ddday').innerHTML=dday;
document.getElementById('ddhour').innerHTML=dhour;
document.getElementById('ddmin').innerHTML=dmin;
document.getElementById('ddsec').innerHTML=dsec;
setTimeout("dcountdown(theyear,themonth,theday,thehour,theminute)",60);
}
}
dcountdown(year,month,day,hour,minute);
</script>

собственно на выходе 2 рабочих таймера от одной даты...
а потому плюсую пост от Для просмотра ссылки Войди или Зарегистрируйся - так, как он был частично прав!
всем спасибо!
 
Последнее редактирование модератором:
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху