Попытка иметь два отсчета JS на одной странице

Question

Попытка иметь два отсчета JS на одной странице

0

Так что у меня этот код в counter.js

month= --month;
dateFuture = new Date(year,month,day,hour,min,sec);
dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2);

function GetCount(){

    dateNow = new Date();                                                            
    amount = dateFuture.getTime() - dateNow.getTime()+5;               
    delete dateNow;

    /* time is already past */
    if(amount < 0){
            out=
            "<div id='days'><span></span><p>0</p><div id='days_text'></div></div>" + 
            "<div id='hours'><span></span><p>0</p><div id='hours_text'></div></div>" + 
            "<div id='mins'><span></span><p>0</p><div id='mins_text'></div></div>" + 
            "<div id='secs'><span></span><p>0</p><div id='secs_text'></div></div>" ;
            document.getElementById('countbox').innerHTML=out;       
    }
    /* date is still good */
    else{
            days=0;hours=0;mins=0;secs=0;out="";

            amount = Math.floor(amount/1000); /* kill the milliseconds */

            days=Math.floor(amount/86400); /* days */
            amount=amount%86400;

            hours=Math.floor(amount/3600); /* hours */
            amount=amount%3600;

            mins=Math.floor(amount/60); /* minutes */
            amount=amount%60;


            secs=Math.floor(amount); /* seconds */


            out=
            "<div id='days'><span></span><p>" + days +"</p><div id='days_text'></div></div>" + 
            "<div id='hours'><span></span><p>" + hours +"</p><div id='hours_text'></div></div>" + 
            "<div id='mins'><span></span><p>" + mins +"</p><div id='mins_text'></div></div>" + 
            "<div id='secs'><span></span><p>" + secs +"</p><div id='secs_text'></div></div>" ;
            document.getElementById('countbox').innerHTML=out;


            setTimeout("GetCount()", 1000);
    }
}

month= --month;
dateFuture = new Date(year,month,day,hour,min,sec);
dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2);

function GetCount2(){

    dateNow = new Date();                                                            
    amount = dateFuture2.getTime() - dateNow.getTime()+5;               
    delete dateNow;

    /* time is already past */
    if(amount < 0){
            out=
            "<div id='days2'><span></span><p>0</p><div id='days_text'></div></div>" + 
            "<div id='hours2'><span></span><p>0</p><div id='hours_text'></div></div>" + 
            "<div id='mins2'><span></span><p>0</p><div id='mins_text'></div></div>" + 
            "<div id='secs2'><span></span><p>0</p><div id='secs_text'></div></div>" ;
            document.getElementById('countbox2').innerHTML=out;       
    }
    /* date is still good */
    else{
            days=0;hours=0;mins=0;secs=0;out="";

            amount = Math.floor(amount/1000); /* kill the milliseconds */

                       hours=Math.floor(amount/499600); /* hours */
            amount=amount%3600;

            mins=Math.floor(amount/60); /* minutes */
            amount=amount%60;


            secs=Math.floor(amount); /* seconds */


            out=
            "<div id='days2'><span></span><p>" + days +"</p><div id='days_text'></div></div>" + 
            "<div id='hours2'><span></span><p>" + hours +"</p><div id='hours_text'></div></div>" + 
            "<div id='mins2'><span></span><p>" + mins +"</p><div id='mins_text'></div></div>" + 
            "<div id='secs2'><span></span><p>" + secs +"</p><div id='secs_text'></div></div>" ;
            document.getElementById('countbox2').innerHTML=out;


            setTimeout("GetCount2()", 1000);
    }
}

window.onload=function(){GetCount(); GetCount2();}

И у меня есть этот код в index.html, чтобы указать дату на значительное время, в этом случае оба они одинаковы

     <!-- Enter countdown here -->
<script type="text/javascript">
//Edit data below to your personal preferences ----------------------------------

//Give the date ---------------------------------
year = 2015; year2 = 2015;
month = 12; month2 = 12;
day = 12; day2 = 12;
//Give the point of time ------------------------
hour= 24; hour2 = 24;
min= 0; min2 = 0;
sec= 0; sec2 = 0;
//-----------------------------------------------

//That it!

и это для запуска обоих отсчетов вниз в index.html

<!-- Countdown -->
            <div id="countdown">
                <div class="event-title">
                </div>
                <div id="countbox"></div>
                <div class="event-title"></div>
            </div>


        <div id="countdown2">
            <div class="event-title">
            </div>
            <div id="countbox2"></div>
            <div class="event-title"></div>
        </div>

Обратный отсчет есть и отсчет, но по какой-то причине второй счетчик не имеет никаких дней, он просто показывает как ноль, и он просто показывает, сколько часов, кто-нибудь видит, почему у меня такая проблема? Я прошел через все, и я явно пропускаю что-то важное.

Спасибо за любую помощь.

jl89h 22 окт. 2013, в 12:47

Источник

0

вы, кажется, пропускаете «days = Math.floor (amount / 86400); / * days * /» в функции GetCount2.
Marvin Smit 22 окт. 2013, в 10:48

Теги:

javascript

html

css

2 ответа

0

Проблема заключается в том, что вы манипулируете одинаковыми (глобальными) переменными в обеих ваших функциях, поскольку они не объявлены в какой-либо области.

days=0;hours=0;mins=0;secs=0;out="";

попробуйте переименовать их в

days2=0;hours2=0;mins2=0;secs2=0;out2="";

Taha Rehman Siddiqui 22 окт. 2013, в 08:42

Ещё вопросы

вы, кажется, пропускаете «days = Math.floor (amount / 86400); / * days * /» в функции GetCount2.

lucian · Accepted Answer · 2013-10-22T08-12-00.000Z

Короткий ответ заключается в том, что вам не хватает нескольких строк кода. В частности, после month= --month; вам нужен month2= --month2; и в функции GetCount2 вы пропустили эти две строки:

days=Math.floor(amount/86400); /* days */
amount=amount%86400;

Длинный ответ (и я бы рекомендовал) - сделать функцию GetCount более универсальной и использовать только одну функцию. Таким образом counter.js может выглядеть примерно так:

function GetCount(countdownDate, elementId){
    var dateNow = new Date();
    var amount = countdownDate.getTime() - dateNow.getTime() + 5;               
    delete dateNow;
    var out = "";
    /* time is already past */
    if(amount < 0){
            out =
            "<div id='days'><span></span><p>0</p><div id='days_text'></div></div>" + 
            "<div id='hours'><span></span><p>0</p><div id='hours_text'></div></div>" + 
            "<div id='mins'><span></span><p>0</p><div id='mins_text'></div></div>" + 
            "<div id='secs'><span></span><p>0</p><div id='secs_text'></div></div>" ;
            document.getElementById(elementId).innerHTML=out;       
    }
    /* date is still good */
    else{
            var days=0, hours=0, mins=0, secs=0;

            amount = Math.floor(amount/1000); /* kill the milliseconds */

            days=Math.floor(amount/86400); /* days */
            amount=amount%86400;

            hours=Math.floor(amount/3600); /* hours */
            amount=amount%3600;

            mins=Math.floor(amount/60); /* minutes */
            amount=amount%60;

            secs=Math.floor(amount); /* seconds */

            out=
            "<div id='days'><span></span><p>" + days +" days</p><div id='days_text'></div></div>" + 
            "<div id='hours'><span></span><p>" + hours +" hours</p><div id='hours_text'></div></div>" + 
            "<div id='mins'><span></span><p>" + mins +" mins</p><div id='mins_text'></div></div>" + 
            "<div id='secs'><span></span><p>" + secs +" secs</p><div id='secs_text'></div></div>" ;
            document.getElementById(elementId).innerHTML=out;

            setTimeout(function() { GetCount(countdownDate, elementId); }, 1000);
    }
}

И вы можете на странице вам понадобится что-то вроде

<script type="text/javascript">
    //Edit data below to your personal preferences ----------------------------------

    //Give the date ---------------------------------
    var year = 2015, year2 = 2015,
    month = 12, month2 = 12;
    day = 12, day2 = 12,
    //Give the point of time ------------------------
    hour= 24, hour2 = 24,
    min= 0, min2 = 0,
    sec= 0, sec2 = 0;
    //-----------------------------------------------

    //That it!

    month= --month;
    month2= --month2;
    dateFuture = new Date(year,month,day,hour,min,sec);
    dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2);

    window.onload=function(){
        GetCount(dateFuture, "countdown"); GetCount(dateFuture2, "countdown2");
    }
</script>