Тема: pomodoro clock
Показать сообщение отдельно
  #2 (permalink)  
Старый 12.03.2017, 11:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

таймер-помидорка
killDucksForMoney,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.onload = function(){
  var params = {
    session:2,
    Break: 1
  };
  var time = new Timer(params);
  time.start();
}
function Timer(params){
  this.session = params.session||25;
  this.Break = params.Break||5;
  this.name = "session";
  this.time = (params.session||25)*60*1000;
  this.timerId = null;
}
Timer.prototype.stop = function(){window.clearTimeout(this.timerId) }
Timer.prototype.start = function(){
  var self = this;
  self.stop();
  var from = (new Date).getTime();
  var to = from + self.time
  function tick(){
    self.time = to - (new Date).getTime(); document.querySelector("#show").innerHTML = formatTime(self.time) + " " + self.name
    if(self.time <= 0){
     self.name = self.name == "session" ? "Break" : "session";
     self.time = self[self.name]*60*1000;
     self.start()
    }
    else self.timerId = setTimeout(tick, 1000);
  }
  tick()
function two(a) {
    return (9 < a ? "" : "0") + a
}
function formatTime(a) {
    a = Math.floor(a / 1E3);
    var c = Math.floor(a / 60),
        d = Math.floor(c / 60);
    a %= 60;
    c %= 60;
    return two(d) + " : " + two(c) + " : " + two(a)
}
}
  </script>
</head>

<body>
<div id="show"></div>

</body>
</html>
Ответить с цитированием