Индивидуальный таймер [требует правки]

295

07 марта 2018, 09:14

Нужен таймер для пользователя (к примеру 10 минут). При обновлении страницы таймер должен начинать отсчет заново. Данные таймера это всего лишь наглядная информация, для пользователя. Может у кого есть примеры на данную тему?

Answer 1

Пример взят с сайта codepen

var minuts = 25; 
var seconds = minuts * 60; 
var timer= undefined; 
var isStarted = false; 
var isPaused = false; 
 
function convertNum(num) { 
  num = num.toString(); 
  if(num.length == 1){ 
    return "0" + num; 
  } else { 
    return num; 
  } 
} 
 
function displaySeconds() { 
  $("#timer").text(convertNum(Math.floor(seconds / 60)) + ":" +  
                   convertNum(seconds % 60)); 
} 
 
function displayMinuts() { 
  $("#pomodoro-time").text(minuts); 
} 
 
$("#start-button").click(function(){ 
  if(!isStarted){ 
    timer = setInterval(function(){ 
      seconds--; 
      displaySeconds(); 
      if(seconds == 0) { 
        clearInterval(timer); 
      } 
    }, 1000); 
 
    isStarted = true; 
 
    $("#minus-button").attr("disabled", "disabled"); 
    $("#plus-button").attr("disabled", "disabled"); 
 
  } 
}); 
 
$("#plus-button").click(function(){ 
  if(minuts < 60) { 
    minuts++; 
    seconds = minuts * 60; 
    displayMinuts(); 
    displaySeconds(); 
  } 
}); 
 
$("#minus-button").click(function(){ 
  if(minuts > 1) { 
    minuts--; 
    seconds = minuts * 60; 
    displayMinuts(); 
    displaySeconds(); 
  } 
}); 
 
$("#pause-button").click(function(){ 
  clearInterval(timer); 
  isStarted = false; 
}); 
 
$("#reset-button").click(function(){ 
  clearInterval(timer); 
  seconds = minuts * 60; 
  isStarted = false; 
 
  $("#minus-button").removeAttr("disabled"); 
  $("#plus-button").removeAttr("disabled"); 
  displaySeconds(); 
});

#pomodoro-time { 
	display: inline-block; 
} 
 
.spinCounter { 
	text-align: center; 
	width: 200px; 
	margin: auto; 
} 
 
.buttons { 
	width: 310px; 
	margin: auto; 
} 
 
.buttons>.btn { 
	width: 100px; 
} 
 
.spinCounter>.btn { 
	margin-right: 15px; 
	margin-left: 15px; 
} 
 
.text-center{ 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <h1 class="text-center">Roman Erdt's Pomodoro Timer!</h1> 
  <div class="spinCounter"> 
    <button id="minus-button" class="btn btn-default btn-lg" type="button">-</button> 
    <h1 id="pomodoro-time">25</h1> 
    <button id="plus-button" class="btn btn-default btn-lg" type="button">+</button> 
  </div> 
  <h1 id="timer" class="text-center">25:00</h1> 
  <div class="buttons"> 
    <button id="start-button" class="btn btn-success btn-lg" type="button">Start</button> 
    <button id="pause-button" class="btn btn-info btn-lg" type="button">Pause</button> 
    <button id="reset-button" class="btn btn-danger btn-lg" type="button">Reset</button> 
  </div> 
</div>

На примере кода можно сделать следующее:

timer = setInterval(function(){
  //Сюда вставить анимацию
  seconds--;
  if(seconds == 0) {
    //Участок кода выполнится когда время кончится 
    clearInterval(timer);
  }
}, 1000);

Answer 2

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

<div id="timer">00:00</div>
<script type="text/javascript">
setInterval (function () {
    debugger;
    var timer = document.getElementById('timer');
    var arr = timer.innerText.split(':');
    var seconds = Number(arr[1]);
    seconds++;
    var minutes = Number(arr[0]);
    if (seconds == 60) {
        minutes++;
        seconds = 0;
    }
    timer.innerText = ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2);
}, 1000);
</script>