0

JavaScript でカウントダウン時計を作成していますが、希望どおりに書式設定するのに問題があります。基本的に、カウントダウンが実行される合計秒数に最初に設定されている totalTime という変数があります。この数値は 1 秒ごとに 1 ずつ減少し、ページに表示するために分と秒に変換します。

私をつまずかせているのは、totalTime の初期値が 600 (10:00) 以上の場合に限り、残りの分数の先頭に 0 を含めたいということです。したがって、totalTime を 600 に設定すると、カウントダウンに 10:00、09:59、09:58 などを表示する必要があります (先頭の 0 に注意してください)。しかし、totalTime を 300 に設定すると、カウントダウンに 5:00、4:59、4:58 などを表示したいと思います。

別の言い方をすれば、先頭の 0 は、現在の残り時間 (totalTime の現在の値) ではなく、カウントダウンの開始時間 (totalTime の初期値) に基づいて表示される必要があります。どうすればいいですか？

編集:これが私が現在持っているコードです: http://jsfiddle.net/JFYaq/

// Get the countdown element
var countdown = document.getElementById("countdown");

// Set the total time in seconds
var totalTime = 600;

// Every second...
var interval = setInterval(function(){
    // Update the time remaining
    updateTime();

    // If time runs out, stop the countdown
    if(totalTime == -1){
        clearInterval(interval);
        return;
    }
}, 1000);

// Display the countdown
function displayTime(){
    // Determine the number of minutes and seconds remaining
    var minutes = Math.floor(totalTime / 60);
    var seconds = totalTime % 60;

    // Add a leading 0 to the number of seconds remaining if it's less than 10
    if (seconds < 10){
        seconds = "0" + seconds;
    }

    // Split the number of minutes into two strings
    var minutesString = minutes + "";
    var minutesChunks = minutesString.split("");

    // Split the number of seconds into two strings
    var secondsString = seconds + "";
    var secondsChunks = secondsString.split("");

    // If the total time is 10 minutes or greater...
    if (totalTime >= 600){
        // Add a leading 0 to the number of minutes remaining if it's less than 10
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        // Display the time remaining
        countdown.innerHTML = "<span>" + minutesChunks[0] + "</span>" + "<span>" + minutesChunks[1] + "</span>" + ":" + "<span>" + secondsChunks[0] + "</span>" + "<span>" + secondsChunks[1] + "</span>";
    }
    // If the total time is less than 10 minutes...
    else {
        // Display the time remaining without a leading 0 on the number of minutes
        countdown.innerHTML = "<span>" + minutes + "</span>" + ":" + "<span>" + secondsChunks[0] + "</span>" + "<span>" + secondsChunks[1] + "</span>"
    }        
}

// Update the time remaining
function updateTime(){
    displayTime();
    totalTime--;
}

// Start the countdown immediately on the initial pageload
updateTime();
4

1 に答える 1

1

フィドル: http://jsfiddle.net/JFYaq/1/

説明：

必要に応じて前にゼロを付けるには、次の関数を使用できます。

function pad(n){
    return n > 9 ? "" + n : "0" + n;
}

注"" + n. このpad(n)関数は常に文字列を返します。これは、文字列メソッドを適用するのに役立ちます。

パディングは常に 2 番目のカウンターで使用する必要があります。分カウンターの場合、元の時間を変数に格納し、600 を超えていないかどうかを確認します。

var original = 600;
function padMinute(n){
    return original >= 600 && n < 9 ? "0" + n : "" + n;
}

あなたのコードに関連して：

function displayTime(){
    var minutes = Math.floor(totalTime / 60);
    var seconds = totalTime % 60;

    minutes = "<span>" + padMinute(minutes).split("").join("</span><span>") + "</span>";
    seconds = "<span>" + pad(seconds).split("").join("</span><span>") + "</span>";

    countdown.innerHTML = minutes + ":" + seconds;
}

.split("")文字列を文字リストに分割します。.join("</span><span>")文字列のセットを連結し、</span><span>すべての文字の間に追加するために使用されます。最終的な HTML が有効になるように、結果全体が<span>and と結合されます。</span>

実行モデル:

1. padMinute(minutes)                       "09"
2.             .split("")                   Array( "0" , "9" )
3.                   .join("</span><span>")
                                            "0</span><span>9"
4.                "<span>" + .. + "</span>" "<span>0</span><span>9<span>"
于 2011-10-18T20:05:15.903 に答える