Question

我正在使用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();

Answer 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("")用于连接字符串集，在每个字符之间添加。整个结果与和结合使用，以便最终的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>"

用JavaScript构建倒计时时钟

1 个答案: