我正在使用JavaScript构建一个倒计时时钟,但我无法按照自己的意愿格式化它。基本上,我有一个名为totalTime的变量,它最初设置为倒计时运行的总秒数。每秒,这个数字减少1,我将其转换为分钟和秒,以便在页面上显示。
让我感到震惊的是,我希望在剩余的分钟数中包含前导0,但前提是总时间的初始值为600(10:00)或更高。所以,如果我将totalTime设置为600,我希望倒计时显示10:00,09:59,09:58等(注意前导0);但如果我将totalTime设置为300,我希望倒计时显示5:00,4:59,4:58等。
换句话说,前导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();
答案 0 :(得分:1)
小提琴:http://jsfiddle.net/JFYaq/1/
说明:
如有必要,可以使用以下函数:
function pad(n){
return n > 9 ? "" + n : "0" + n;
}
注意"" + n
。 pad(n)
函数将始终返回一个字符串,这对应用字符串方法很有用。
填充应始终在第二个计数器处使用。对于分钟计数器,将原始时间存储在变量中,并检查它是否超过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>"