Таймер JavaScript для использования несколько раз на странице

1

У меня есть этот таймер обратного отсчета Javascript, который отлично работает. Единственная проблема - я могу использовать его только один раз на одной странице. Я хочу использовать его несколько раз.

Я думаю, что сценарий использует id ="timer", поэтому я не могу использовать его несколько раз.

Ниже приведен код JS:

<script>
var startTime = 60; //in Minutes
var doneClass = "done"; //optional styling applied to text when timer is done
var space = '       ';

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  var intervalLoop = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = "00" + space + minutes + space + seconds;
    if (--timer < 0) {
      document.querySelector("#timer").classList.add(doneClass);
      clearInterval(intervalLoop);
    }
  }, 1000);
}

window.onload = function() {
  var now = new Date();
  var hrs = now.getHours();
  var setMinutes = 60 * (startTime - now.getMinutes() - (now.getSeconds() / 100)),
    display = document.querySelector("#timer");

  startTimer(setMinutes, display);
};
</script>
Теги:
timer

3 ответа

0
window.setInterval(function(){ Your function }, 1000);

Здесь 1000 означает timer 1 sec

0

Я думаю, что что-то вроде этого может быть полезно:

Объявление объекта таймера

var timerObject = function(){
	this.startTime = 60; //in Minutes
	this.doneClass = "done"; //optional styling applied to text when timer is done
	this.space = '       ';

 	return this;
};

timerObject.prototype.startTimer = function(duration, display) {
  var me = this, 
    timer = duration,
    minutes, seconds;
  var intervalLoop = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;
    display.textContent = "00" + me.space + minutes + me.space + seconds;
    if (--timer < 0) {
      // not sure about this part, because of selectors
      document.querySelector("#timer").classList.add(me.doneClass);
      clearInterval(intervalLoop);
    }
  }, 1000);
}

Используйте его как

var t1 = new timerObject();
var t2 = new timerObject();
t1.startTimer(a,b);
t2.startTimer(a,b);

Пример JS Fiddle:

UPD1 прокомментировала часть, чтобы таймер мог быть остановлен

https://jsfiddle.net/9fjwsath/1/

  • 0
    спасибо за Ваш ответ. Подскажите, пожалуйста, как будут работать var t1 и t2. В настоящее время в HTML я просто использую <span id = "timer"> . Как это будет работать?
  • 0
    @SahibjotSingh о, так что вы хотите использовать его так же, применяя к тому же элементу HTML?
Показать ещё 6 комментариев
0

Просто объявляйте intervalLoop за пределами функции startTimer, он будет доступен по всему миру.

var intervalLoop = null

function startTimer(duration, display) {
  intervalLoop = setInterval(function() { .... }
})


function stopTimer() {
  clearInterval(intervalLoop) // Also available here!
})

Ещё вопросы

Сообщество Overcoder
Наверх
Меню