Вы уже получили довольно много ответов, я хотел бы привести еще один пример, чтобы у вас была альтернативная архитектура для рассмотрения.Обязательно прочитайте scopes и closures и используйте this.Кроме того, вам не нужен jQuery для этой функции.Импортируйте большую библиотеку, такую как jQuery, только тогда, когда вам это нужно.В этом случае document.getElementById хорошо, как и addEventListener.
. Есть еще более интересные способы обработки обратного отсчета (включая использование рекурсии), но ниже приведен пример представления ваших часов какодин объект.Это дает вам больший контроль над часами и делает его многократно используемым.
Вы можете определять функции на часах, которые управляют интервалом, уменьшают обратный отсчет, приостанавливают, возобновляют, запускают и сбрасывают часы.Я добавил кнопки для каждой, чтобы вы могли видеть, как это будет работать.Также обратите внимание, что я закомментировал localStorage, чтобы показать, что он работает без хранилища, но в основном потому, что фрагментам в StackOverflow не разрешено использовать localStorage, поэтому он может аварийно завершить работу, но вы можете запустить этот код здесь как есть.
var Clock = {
speaking_value: 10,
interval: -1,
countdown: function() {
speaking_value = this.speaking_value;
if (speaking_value <= 0) {
//localStorage.setItem("speaking_counter", 0);
} else {
speaking_value = parseInt(speaking_value) - 1;
//localStorage.setItem("speaking_counter", speaking_value);
}
document.getElementById('overall_time').innerHTML = speaking_value;
if (speaking_value == 0) {
//localStorage.setItem("speaking_counter", speaking_value);
var self = this;
setTimeout(function() {
clearInterval(self.interval);
}, 1000);
}
this.speaking_value = speaking_value;
this.updateClock();
},
paused: false,
pause: function() {
clearInterval(this.interval);
this.paused = true;
},
resume: function() {
if (this.paused) {
this.paused = false;
this.tick();
}
},
updateClock: function() {
speaking_value = this.speaking_value;
var hours = Math.floor(speaking_value / 3600);
var minutes = Math.floor(speaking_value % 3600 / 60);
var seconds = Math.floor(speaking_value % 3600 % 60);
var red_time = hours + ' : ' + minutes + ' : ' + seconds;
document.getElementById('overall_times').innerHTML = red_time;
},
tick: function() {
var self = this;
this.interval = setInterval(function() {
self.countdown()
}, 1000)
},
start: function() {
this.updateClock();
this.tick();
},
reset: function(){
clearInterval(this.interval);
this.speaking_value = 10;
this.updateClock();
}
};
Clock.updateClock();
document.getElementById('startButton').addEventListener('click', function() { Clock.start(); });
document.getElementById('pauseButton').addEventListener('click', function() { Clock.pause(); });
document.getElementById('resumeButton').addEventListener('click', function() { Clock.resume(); });
document.getElementById('resetButton').addEventListener('click', function() { Clock.reset(); });
<div class="div__time">
<div style="display: none;" id="overall_time"></div>
<div id="overall_times"></div>
<div class="total_time"></div>
</div>
<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
<input id="resetButton" type="button" value="Reset">