Счетчик времени на Джаваскрипт

227

06 мая 2018, 19:37

Сумел с костылями закодить такой вот счетчик.Не подскажете как сделать бесконечный цикл,чтобы таймер шел с 0 до бесконечности.Совсем запутался, проблемы с синтаксисом

while 
window.onload = function() { 
  function timer() { 
 
    var hour = document.getElementById('hour').innerHTML; 
    var minute = document.getElementById('minute').innerHTML; 
    var second = document.getElementById('second').innerHTML; 
    var end = false; 
 
    if (second > 0) second--; 
    else { 
      second = 59; 
 
      if (minute > 0) minute--; 
      else { 
        second = 59; 
 
        if (hour > 0) hour--; 
        else end = true; 
      } 
    } 
 
    if (end) { 
      clearInterval(intervalID); 
      alert("Таймер сработал!"); 
    } else { 
      document.getElementById('hour').innerHTML = hour; 
      document.getElementById('minute').innerHTML = minute; 
      document.getElementById('second').innerHTML = second; 
    } 
  } 
  window.intervalID = setInterval(timer, 1000); 
}

#timer { 
  margin: 20px auto; 
  text-align: center; 
  color: #333; 
  font-family: fantasy; 
  font-size: 100px; 
  cursor: default; 
} 
 
#timer div { 
  display: inline; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta http-equiv='Content-Type' content='text/html; charset=utf8'> 
  <title>Создаем таймер обратного отсчета - Seo блог sergey-oganesyan.ru</title> 
</head> 
 
<body> 
 
  <div id="timer"> 
    <div id="hour">11</div>&nbsp;: 
    <div id="minute">56</div>&nbsp;: 
    <div id="second">45</div> 
  </div> 
 
</body> 
 
</html>

Answer 1

(function() { 
  var d = +new Date(2018, 05, 05); 
  setInterval(function() { 
    var t = new Date; 
    t.setTime(d += 1000); 
 
    var s = t.getSeconds(); 
    var h = t.getHours(); 
    var m = t.getMinutes(); 
 
    document.getElementById('clock').innerHTML = h + ':' + m + ':' + s 
  }, 1000); 
})();

<div id="clock"> 
  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span> 
</div>

Answer 2

Вынес на верх функцию и добавил window.intervalID в функцию clearInterval.

var timer = function() { 
 
    var hour = document.getElementById('hour').innerHTML; 
    var minute = document.getElementById('minute').innerHTML; 
    var second = document.getElementById('second').innerHTML; 
    var end = false; 
 
    if (second > 0) second--; 
    else { 
      second = 59; 
 
      if (minute > 0) minute--; 
      else { 
        second = 59; 
 
        if (hour > 0) hour--; 
        else end = true; 
      } 
    } 
 
    if (end) { 
      clearInterval(window.intervalID); 
      console.log("Таймер сработал!"); 
    } else { 
      document.getElementById('hour').innerHTML = hour; 
      document.getElementById('minute').innerHTML = minute; 
      document.getElementById('second').innerHTML = second; 
    } 
  } 
 
window.onload = function() { 
  window.intervalID = setInterval(timer, 1000); 
  timer(); 
}

#timer { 
  margin: 20px auto; 
  text-align: center; 
  color: #333; 
  font-family: fantasy; 
  font-size: 100px; 
  cursor: default; 
} 
 
#timer div { 
  display: inline; 
}

  <div id="timer"> 
    <div id="hour">11</div>&nbsp;: 
    <div id="minute">56</div>&nbsp;: 
    <div id="second">45</div> 
  </div>

Answer 3

var hour = document.getElementById('hour'); 
var minute = document.getElementById('minute'); 
var second = document.getElementById('second'); 
 
function tic() { 
 
  var time_hour = Number(hour.innerText); 
  var time_minute = Number(minute.innerText); 
  var time_second = Number(second.innerText); 
 
  time_second++; 
 
  if (time_second >= 59) { 
    time_minute++; 
    time_second = 0; 
    if (time_minute >= 59) { 
      time_hour++; 
      time_minute = 0; 
    } 
  } 
  hour.innerHTML = time_hour; 
  minute.innerHTML = time_minute; 
  second.innerHTML = time_second; 
 
  if (time_hour == 11 && time_minute == 12 && time_second == 34) { 
    clearInterval(Iteration); 
  } 
} 
var Iteration = setInterval(tic, 10);

#timer { 
  margin: 20px auto; 
  text-align: center; 
  color: #333; 
  font-family: fantasy; 
  font-size: 100px; 
  cursor: default; 
} 
 
#timer div { 
  display: inline; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta http-equiv='Content-Type' content='text/html; charset=utf8'> 
  <title>Создаем таймер обратного отсчета - Seo блог sergey-oganesyan.ru</title> 
</head> 
 
<body> 
 
  <div id="timer"> 
    <div id="hour">11</div>&nbsp;: 
    <div id="minute">10</div>&nbsp;: 
    <div id="second">34</div> 
  </div> 
 
</body> 
 
</html>