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's 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>

カウントダウンはそこにあり、カウントダウンしていますが、何らかの理由で 2 番目のカウンターには日数がなく、ゼロとして表示され、何時間だけ表示されますか? 私はすべてを経験しましたが、明らかに重要なものを見逃しています。

助けてくれてありがとう。

4

2 に答える 2

0

簡単に言えば、数行のコードが不足しているということです。具体的には、month= --month;必要month2= --month2;になった後、GetCount2関数で次の2行を見逃しました：

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

長い答え (そして私がお勧めすること) は、GetCount関数をもう少し汎用化し、1 つの関数のみを使用することです。したがって、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's 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>
于 2013-10-22T11:00:26.400 に答える
0

問題は、スコープ内で宣言されていないため、両方の関数で同じ (グローバル) 変数を操作しているようです。

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

これらの名前をに変更してみてください

days2=0;hours2=0;mins2=0;secs2=0;out2="";
于 2013-10-22T10:49:55.390 に答える