Таймер обратного отсчёта, задать время в input, вывести кликнув на button
День добрый! Подскажите, пожалуйста, имеется код,
- как можно организовать установку времени(задать время для таймера, точку отсчёта)
- желаемое время ввести в поле input id="setmin", вывод по нажатию кнопки settime
- как сделать чтобы по окончанию времени таймер стопался на 00:00:00
var ss = document.getElementsByClassName('stopwatch');
[].forEach.call(ss, function(s) {
var currentTimer = 0,
interval = 0,
lastUpdateTime = new Date().getTime(),
start = s.querySelector('button.start'),
stop = s.querySelector('button.stop'),
reset = s.querySelector('button.reset'),
mins = s.querySelector('span.minutes'),
secs = s.querySelector('span.seconds'),
msec = s.querySelector('span.milliseconds');
start.addEventListener('click', startTimer);
stop.addEventListener('click', stopTimer);
reset.addEventListener('click', resetTimer);
function pad(n) {
return ('00' + n).substr(-2);
}
function update() {
var now = new Date().getTime(),
dt = now - lastUpdateTime;
currentTimer -= dt;
var time = new Date(currentTimer);
mins.innerHTML = pad(time.getMinutes());
secs.innerHTML = pad(time.getSeconds());
msec.innerHTML = pad(Math.floor(time.getMilliseconds() / 10));
lastUpdateTime = now;
}
function startTimer() {
if (!interval) {
lastUpdateTime = new Date().getTime();
interval = setInterval(update, 1);
}
}
function stopTimer() {
clearInterval(interval);
interval = 0;
}
function resetTimer() {
stopTimer();
currentTimer = 0;
mins.innerHTML = secs.innerHTML = msec.innerHTML = pad(0);
}
});
<div class="stopwatch">
<div class="controls">
<button class="start">Start</button>
<button class="stop">Stop</button>
<button class="reset">Reset</button>
</div>
<div class="display">
<span class="minutes">00</span> :
<span class="seconds">00</span> .
<span class="milliseconds">00</span>
</div>
<input id="setmin" type="number" max="60" min="00" placeholder="00">
<input id="setsec" type="number" max="99" min="00" placeholder="00">
<button class="settime">set time</button>
</div>