JavaScriptにカウントダウンクロックを構築します
-
26-10-2019 - |
質問
私はJavaScriptでカウントダウンクロックを構築しており、私が望む方法を正確にフォーマットするのに苦労しています。基本的に、TotalTimeと呼ばれる変数があり、最初にカウントダウンが実行される秒数に設定されています。 1秒ごとに、この数は1減少し、ページに表示するために数分と秒に変換します。
私をつまずかせているのは、残りの時間数にリーディング0を含めたいということですが、 イニシャル TotalTimeの値は600(10:00)以上です。したがって、合計時間を600に設定した場合、10:00、09:59、09:58などをカウントダウンに表示したい(先頭に注意してください)。しかし、合計時間を300に設定した場合、カウントダウンを5:00、4:59、4:58などに表示する必要があります。
別の言い方をすれば、カウントダウンが開始する時間(TotalTimeの初期値)に基づいて、先行0が表示される必要があります。 いいえ 現在どのくらいの時間が残っているか(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();
解決
フィドル: 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>
すべてのキャラクター間。結果全体が結合されます <span>
と </span>
最終的なHTMLが有効になるように。
実行モデル:
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>"