У меня есть поле:
<input type="number" id="for-second" placeholder="00" min="0" max="59" />
В которое вводяться секунды в диапазоне от 0 до 59.
Мне нужно, чтобы при условии (n < 10) секунды записывались в формате 00
.
Пример: 07, 02, 00.
Сама функция добавления 0
к числу есть, конечно же.
Она работает только когда таймер запускаеться (при клике на кнопку «play») - что уже хорошо.
Но для полной картины нужно, чтобы 0
добавлялся к числу, когда я ввожу значение или кликаю по стрелочкам вверх/вниз.
Чего без функции поля - получить не удается!
Реализация:
// JAVASCRIPT
//--- Переменные ---
var hour = document.getElementById('for-hour').value;
var minute = document.getElementById('for-minute').value;
var second = document.getElementById('for-second').value;
//--- Функция таймера ---
function Launch() {
//--- проверки на времья ---
if (second > 0) {
if (second > 60) {
minute = Math.floor(second / 60);
second = second - (minute * 60) + 1;
}
second--;
if ((second < 10) || (second == 0)) {
second = ZeroBeforeValue(second);
}
}
else if ((minute > 0) && (second == 0)) {
minute--;
second = 59;
if ((minute < 10) || (minute == 0)) {
minute = ZeroBeforeValue(minute);
}
}
else if ((hour > 0) && (minute == 0) && (second == 0)) {
hour--;
minute = 59;
second = 59;
if ((hour < 10) || (hour == 0)) {
hour = ZeroBeforeValue(hour);
}
}
//--- если конец, то ---
else {
clearInterval(intervalID);
document.getElementById('for-hour').value = '';
document.getElementById('for-minute').value = '';
document.getElementById('for-second').value = '';
alert("Time is running out!!!");
return false;
}
//--- записуем данные
document.getElementById('for-hour').value = hour;
document.getElementById('for-minute').value = minute;
document.getElementById('for-second').value = second;
} //--- Обновление функции таймера каждой секунды ---
window.intervalID = setInterval(Launch, 1000);
//--- Функция добавления 0 к n, если (n < 10) ---
//--- Якщо (n < 10), то перед 'n' додаємо '0'
function ZeroBeforeValue(value) {
var text = value + '';
value = '0' + text;
return value;
}
<!-- HTML -->
<input type="number" id="for-hour" placeholder="00" min="0" max="23" />:
<input type="number" id="for-minute" placeholder="00" min="0" max="59" />:
<input type="number" id="for-second" placeholder="00" min="0" max="59" />
input type="time"
не подходит?