Таймер обратного отсчета приготовления с кнопкой запуска - PullRequest
Новая
       19

Таймер обратного отсчета приготовления с кнопкой запуска

0 голосов
/ 07 мая 2018

Я создаю приложение, чтобы помочь пользователю готовить макароны. Пользователь выберет множество вариантов, и последний шаг создаст таймер на основе выбранных параметров. (Пример: при выборе лапши для спагетти, al dente приведет к 10-минутному таймеру). Для отладки кода я удалил свой код, чтобы вычислить переменную cookTime, и установил ее равной 10 (минутам), чтобы немного облегчить работу. , Вот мой код: 

<script>
	
    var cookTime = 10;
    
	$("#timerButton").on("click", function(event){
		event.preventDefault();
		document.getElementById('timer').innerHTML = Number(cookTime) + ":" + 00;
		startTimer();
	});

	function startTimer() {
	  var presentTime = Number(cookTime) + ":" + 00;
	  var timeArray = presentTime.split(/[:]+/);
	  var m = timeArray[0];
	  var s = checkSecond((timeArray[1] - 1));
		  if(s===59){
			  m=m-1;
		  } //if(m<0){alert('timer completed')}

	  document.getElementById('timer').innerHTML =
		m + ":" + s;
	  setTimeout(startTimer, 1000);
	}

	function checkSecond(sec) {
	  if (sec < 10 && sec >= 0){ // add zero in front of numbers < 10
		  sec = "0" + sec;
	  } 
	  if (sec < 0){
		  sec = "59";
	  }
	  return sec;
	}
</script>
p {
  text-align: center;
  font-size: 60px;
  margin-top:50px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="timer"></div>
  <a href="#" id="timerButton">Start Timer</a>
</body>
</html>

1 Ответ

0 голосов
/ 07 мая 2018

Вы устанавливаете переменные минут и секунд внутри своей функции, чтобы они каждый раз получали одни и те же значения. 

var cookTime = 1;
var presentTime = Number(cookTime) + ":00";
var timeArray = presentTime.split(/[:]+/);
// set your minute and second counters
var min = parseInt(timeArray[0]);
var sec = parseInt(timeArray[1]);

$("#timerButton").on("click", function(event){
    event.preventDefault();
    // show initial time (using jquery since you're already using it for your click function)
    $('#timer').html(presentTime);
    startTimer(min, sec);
});

function startTimer(m, s) {
  s--;
  if (s<0) {
    s = 59;
    m--;
  }

  if (m>=0) {
    $('#timer').html(m+':'+pad2(s));

    // pass the current values for m and s into startTimer
    setTimeout(function(){
        startTimer(m,s);
    }, 1000);
  } 
  else alert('time\'s up');
}

// shorter version of your checkSecond function
function pad2(number) {
  return (number < 10 ? '0' : '') + number; 
}

Проверьте скрипку: https://jsfiddle.net/j3txcjmz/

...