Создание часов обратного отсчета в JavaScript

Я создаю часы обратного отсчета в JavaScript, и у меня возникают проблемы с форматированием именно так, как я хочу. По сути, у меня есть переменная с именем totalTime, которая изначально установлена ​​​​на общее количество секунд, в течение которых будет выполняться обратный отсчет. Каждую секунду это число уменьшается на 1, и я конвертирую его в минуты и секунды для отображения на странице.

Что меня сбивает с толку, так это то, что я хочу включить 0 в число оставшихся минут, но только если начальное значение totalTime равно 600 (10:00) или больше. Итак, если я установлю 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();

javascript countdown leading-zero seconds minute
person daGUY    schedule 18.10.2011    source источник
comment
Можете ли вы опубликовать код, который вы написали?   -  person Andrew Whitaker    schedule 19.10.2011
comment
Обновлен со ссылкой на JSFiddle (по какой-то причине я не смог правильно отформатировать код в сообщении).   -  person daGUY    schedule 19.10.2011

Ответы (1)


arrow_upward
1
arrow_downward

Скрипт: http://jsfiddle.net/JFYaq/1/

Объяснение:

Чтобы при необходимости поставить ноль, можно использовать следующую функцию:

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

Заметка 2_. Функция 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>"
person Rob W    schedule 18.10.2011
comment
Фантастика! Большое спасибо. - person daGUY; 19.10.2011
comment
В вашем коде, когда вы говорите var original = totalTime;, почему значение original не уменьшается на 1 каждую секунду, как это делает totalTime? Мне интересно, почему это работает. - person daGUY; 19.10.2011
comment
В JavaScript примитивные значения (строки, числа, логические значения, null и undefiend) копируются, когда другая переменная указывает на переменную, которая ее содержит. Все остальные объекты передаются по ссылке. Итак, var a={b:2}, c=a; a.b=5; alert(c.b) покажет 5. - person Rob W; 19.10.2011