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

Тема в разделе "JavaScript", создана пользователем Denis_Pi, 27 сен 2013.

Статус темы:
Закрыта.
Модераторы: ZiX
  1. Denis_Pi

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    Не вкуриваю в чём дело...
    Подключаю таймер отсчёта времени к странице...

    Код:
    <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. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    360
    Симпатии:
    243
    2 одинаковых id-шника на одной странице не будут работать.
     
  3. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    HTML:
    var first = setTimeout(function(){
        console.log( 'first' );
    }, 2000);
    
    var second = setTimeout(function(){
        console.log( 'second' );
    }, 1000);
    
    //clearTimeout( first );
    //clearTimeout( second );
     
  4. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    360
    Симпатии:
    243
    BDSG, не тот таймер.. :)
    Если использовать что-то вроде такого https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer можно обойтись добавлением пары строк
    Код:
    var countdown2 = document.getElementById("countdown2");
    
    // format countdown string + set tag value
        countdown2.innerHTML = days + "d, " + hours + "h, "
        + minutes + "m, " + seconds + "s";  
     
    Denis_Pi и BDSG нравится это.
  5. BDSG

    BDSG

    Регистр.:
    28 фев 2009
    Сообщения:
    203
    Симпатии:
    109
    esche, да я знаю, что setTimeout просто отсрочка, в отличии от счётчика setInterval (что, в общем то, понятно из названий).. дал тс возможность подумать, подсказав, как можно разделять ресурсы счетчиков (закомментированный сброс не просто так указал).. ))
     
  6. esche

    esche

    Регистр.:
    9 авг 2009
    Сообщения:
    360
    Симпатии:
    243
    Если я правильно понял, разделять ресурсы не нужно.. Ну, т.е. цифры в обоих случаях должны быть идентичны - просто выводить их в 2 различных места (в верхней и нижней частях страницы).

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

    Denis_Pi Art сreator

    Заблокирован
    Регистр.:
    8 май 2012
    Сообщения:
    398
    Симпатии:
    214
    В общем вопрос решил сегодня утром, вчера видать уже спал на ходу....

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

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