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

[Denis_Pi]

Не вкуриваю в чём дело...
Подключаю таймер отсчёта времени к странице...

<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-й раз - на этой же странице но в другом месте - подключаю, а ему всё равно, тупо считает только первый... второй игнорит - где косячу ?

 

[esche]

2 одинаковых id-шника на одной странице не будут работать.

 

[BDSG]

var first = setTimeout(function(){
    console.log( 'first' );
}, 2000);

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

//clearTimeout( first );
//clearTimeout( second );

 

[esche]

BDSG, не тот таймер..
Если использовать что-то вроде такого Для просмотра ссылки Войди или Зарегистрируйся можно обойтись добавлением пары строк

var countdown2 = document.getElementById("countdown2");

// format countdown string + set tag value
    countdown2.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";

 

[BDSG]

esche, да я знаю, что setTimeout просто отсрочка, в отличии от счётчика setInterval (что, в общем то, понятно из названий).. дал тс возможность подумать, подсказав, как можно разделять ресурсы счетчиков (закомментированный сброс не просто так указал).. ))

 

[esche]

дал тс возможность подумать, подсказав, как можно разделять ресурсы счетчиков (закомментированный сброс не просто так указал).. ))

Если я правильно понял, разделять ресурсы не нужно.. Ну, т.е. цифры в обоих случаях должны быть идентичны - просто выводить их в 2 различных места (в верхней и нижней частях страницы).

p.s. Предлагаю, не гадать, а дождаться реакции ТС-а.

 

[Denis_Pi]

В общем вопрос решил сегодня утром, вчера видать уже спал на ходу....

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

цыфры можно вывести в другом месте назначив им другой 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 рабочих таймера от одной даты...
а потому плюсую пост от Для просмотра ссылки Войди или Зарегистрируйся - так, как он был частично прав!
всем спасибо!