задать спереду 0, если число таймера < 10

Question

Помогите пожалуйста, у меня есть таймер но я не могу установить ноль когда у меня число меньше 10

HTML

<div id="countdown">
    <span id="minute"></span> : <span id="second"></span>
</div>
<button id="start">start</button>
<button id="pause">pause</button>
<button id="reset">reset</button>


<div class="time-set">

    <button id="add">add</button>
    <button id="minus">minus</button>
</div>

JS

let startMinute = 1;
let startSecond = 0;

let minuteDisplay = document.querySelector("#minute");
let secondDisplay = document.querySelector("#second");
let startButton = document.querySelector("#start");

minuteDisplay.innerText = startMinute;
secondDisplay.innerText = startSecond;


let intervalId;
let onPause = () => {
    clearInterval(intervalId);

    startButton.innerText = "start";
    startButton.onclick = () => onStart(parseInt(minuteDisplay.innerText), parseInt(secondDisplay.innerText));
}
document.querySelector("#pause").onclick = onPause;

let onStart = (startMinute, startSecond) => {

    let remainingSec = startMinute * 60 + startSecond;
    intervalId = setInterval(() => {
        remainingSec--;

        let remainingMinute = parseInt(remainingSec / 60);
        let remainingSecond = parseInt(remainingSec % 60);

        minuteDisplay.innerText = remainingMinute;
        secondDisplay.innerText = remainingSecond || '00';

        if (remainingSecond === 0 && remainingMinute === 0) {
            clearInterval(intervalId);
        }

        if (remainingMinute <= 9) {
            remainingMinute = `0` + remainingMinute;
        }

        if (remainingSecond <= 9) {
            remainingSecond = '0' + remainingSecond;
        }
    }, 1000);
}
document.querySelector("#start").onclick = onStart;
startButton.onclick = () => onStart(startMinute, startSecond);

let onReset = () => {
    clearInterval(intervalId);
    minuteDisplay.innerText = startMinute;
    secondDisplay.innerText = startSecond;

    startButton.innerText = "start";
    startButton.onclick = () => onStart(startMinute, startSecond);
}
document.querySelector("#reset").onclick = onReset;

вышеприведенный код не работает

Answer 1

Видимо речь идет про это?

let x;

x = '11';
x = x.padStart(2, '0');
console.log(x);

x = 9;
x = (x+'').padStart(2, '0');
console.log(x);

Там на npm есть пакет, который быстрее стандарта работает...

Btw, для одного знака лучше так:

let x = 3;
if(x < 10)x = `0${x}`;
console.log(x);

Answer 2

Примерно таким образом вы можете организовать форматирование секунд в коде

document.addEventListener('DOMContentLoaded', function() {
   const outputEl = document.querySelector('#output');
   
   function printTime(time) {
      outputEl.innerText = time < 10 ? `0${time}`: time;
   }
   
   let time = 15;
   let interval = setInterval(() => {
      printTime(time--);
      
      if(time < 0) clearInterval(interval);
   }, 1000);
})

<div id="output">
</div>

let startMinute = 1;
let startSecond = 0;

let minuteDisplay = document.querySelector("#minute");
let secondDisplay = document.querySelector("#second");
let startButton = document.querySelector("#start");

minuteDisplay.innerText = startMinute;
secondDisplay.innerText = startSecond;


let intervalId;
let onPause = () => {
    clearInterval(intervalId);

    startButton.innerText = "start";
    startButton.onclick = () => onStart(parseInt(minuteDisplay.innerText), parseInt(secondDisplay.innerText));
}
document.querySelector("#pause").onclick = onPause;

let onStart = (startMinute, startSecond) => {

    let remainingSec = startMinute * 60 + startSecond;
    intervalId = setInterval(() => {
        remainingSec--;

        let remainingMinute = parseInt(remainingSec / 60);
        let remainingSecond = parseInt(remainingSec % 60);

        if (remainingMinute <= 9) {
            remainingMinute = `0` + remainingMinute;
        }

        if (remainingSecond <= 9) {
            remainingSecond = '0' + remainingSecond;
        }
        
        minuteDisplay.innerText = remainingMinute;
        secondDisplay.innerText = remainingSecond || '00';

        if (remainingSecond === 0 && remainingMinute === 0) {
            clearInterval(intervalId);
        }
    }, 1000);
}
document.querySelector("#start").onclick = onStart;
startButton.onclick = () => onStart(startMinute, startSecond);

let onReset = () => {
    clearInterval(intervalId);
    minuteDisplay.innerText = startMinute;
    secondDisplay.innerText = startSecond;

    startButton.innerText = "start";
    startButton.onclick = () => onStart(startMinute, startSecond);
}
document.querySelector("#reset").onclick = onReset;

<div id="countdown">
    <span id="minute"></span> : <span id="second"></span>
</div>
<button id="start">start</button>
<button id="pause">pause</button>
<button id="reset">reset</button>


<div class="time-set">

    <button id="add">add</button>
    <button id="minus">minus</button>
</div>

Исправил ваш код. У вас проверки для форматирования выполняются после того, как произошел вывод значения в html

Answer 3

const minuteDisplay = document.querySelector('#minute');
const secondDisplay = document.querySelector('#second');
const startButton = document.querySelector('#start');
let timerInterval;

minuteDisplay.innerText = '01';
secondDisplay.innerText = '00';

const doStart=(startMinute=1, startSecond=0)=>{
    let remainingSec = startMinute * 60 + startSecond;

    timerInterval = setInterval(()=>{
        remainingSec--;

        let remainingMinute = (remainingSec / 60) | 0;
        let remainingSecond = (remainingSec % 60) | 0;

        if(remainingSecond === 0 && remainingMinute === 0)clearInterval(timerInterval);
        if(remainingMinute < 10)remainingMinute = `0${remainingMinute}`;
        if(remainingSecond < 10)remainingSecond = `0${remainingSecond}`;

        minuteDisplay.innerText = remainingMinute || 00;
        secondDisplay.innerText = remainingSecond || 00;
    }, 1000);
};

document.querySelector('#reset').onclick=()=>{
    clearInterval(timerInterval);
    minuteDisplay.innerText = '01';
    secondDisplay.innerText = '00';

    startButton.innerText = 'start';
    startButton.onclick=()=>doStart();
};


document.querySelector('#pause').onclick=()=>{
    clearInterval(timerInterval);

    startButton.innerText = 'start';
    startButton.onclick=()=>doStart(parseInt(minuteDisplay.innerText), parseInt(secondDisplay.innerText));
};

startButton.onclick=()=>doStart();

БЛОГ НА HUSL

задать спереду 0, если число таймера < 10

Ответы (3 шт):