ПРостой секундомер на Javascript

163
28 ноября 2020, 00:50

Сделал секундомер на JavaScript. Почему-то минуты отсчитываются чуть быстрей, чем секунды. Т.е. пока секунды добираются до 50, минута уже отсчиталась. В чем может быть ошибка?

HTML:

<div class="time">Время на странице: 
     <span id="mins">00</span>:<span id="secs">-1</span>
</div>

JS:

function search(el) {
    return document.querySelector(el);
}
var mins = search('#mins');
var secs = search('#secs');
var body = search('body');

body.onload = myTimer();
function secsTimer() {
    var secs_n = Number(secs.innerHTML);
    secs_n++;
    if (secs_n<10) {secs.innerHTML = '0'+secs_n}
    else if (secs_n == 60) {
        secs.innerHTML = '00'
    }
    else  {secs.innerHTML= secs_n}
    setTimeout("secsTimer()",1000);
}
function minsTimer() {
    var mins_n = Number(mins.innerHTML);
    mins_n++;
    if (mins_n<10) {mins.innerHTML = '0'+mins_n}
    else if (mins_n == 60) {
        mins.innerHTML = '00'
    }
    else  {mins.innerHTML= mins_n}
    setTimeout("minsTimer()",60000);
}
function myTimer() {
    secsTimer();
    minsTimer();
}


function search(el) { 
  return document.querySelector(el); 
} 
 
var mins = search('#mins'); 
var secs = search('#secs'); 
var body = search('body'); 
 
 
body.onload = myTimer(); 
 
function secsTimer() { 
  var secs_n = Number(secs.innerHTML); 
  secs_n++; 
  if (secs_n < 10) { 
    secs.innerHTML = '0' + secs_n 
  } else if (secs_n == 60) { 
    secs.innerHTML = '00' 
  } else { 
    secs.innerHTML = secs_n 
  } 
  setTimeout("secsTimer()", 1000); 
} 
 
function minsTimer() { 
  var mins_n = Number(mins.innerHTML); 
  mins_n++; 
  if (mins_n < 10) { 
    mins.innerHTML = '0' + mins_n 
  } else if (mins_n == 60) { 
    mins.innerHTML = '00' 
  } else { 
    mins.innerHTML = mins_n 
  } 
  setTimeout("minsTimer()", 60000); 
} 
 
function myTimer() { 
  secsTimer(); 
  minsTimer(); 
}
<div class="time">Время на странице: 
  <span id="mins">00</span>:<span id="secs">-1</span> 
</div>

Answer 1

Предложу наверно другой вариант...

Функция в подобных скобках и так срабатывает сразу после загрузки: (function(){...})(); поэтому всё напихал внутри неё. Вместо setTimeout → setInterval, который будет тикать раз в секунду (назначается в миллисекундах, 1000).

JsFiddle (там можно поменять интервал на 5 миллисекунд, убедиться что часы тоже работают)

(function(){ 
 
const hour = document.getElementById('hour'); 
const mins = document.getElementById('mins'); 
const secs = document.getElementById('secs'); 
let S = '00', M = '00', H = '00'; 
 
setInterval(function(){ 
  //Плюсик перед строкой преобразует его в число 
  S = +S +1; 
  //Если результат меньше 10, прибавляем впереди строку '0' 
  if( S < 10 ) { S = '0' + S; } 
  if( S == 60 ) { 
    S = '00'; 
    //Как только секунд стало 60, добавляем +1 к минутам 
    M = +M + 1; 
    //Дальше то же самое, что и для секунд 
    if( M < 10 ) { M = '0' + M; } 
    if( M == 60 ) { 
      //Как только минут стало 60, добавляем +1 к часам. 
      M = '00'; 
      H = +H + 1; 
      if( H < 10 ) { H = '0' + H; } 
    } 
  } 
  secs.innerText = S; 
  mins.innerText = M; 
  hour.innerText = H; 
  //Тикает всё через одну функцию, раз в секунду. 
},1000); 
 
})();
#hour,#mins,#secs {display: inline-block; border-left: 1px solid #123; padding: 1px 5px;}
<div id="hour"></div><div id="mins"></div><div id="secs"></div>

Если что-то и пойдет не так - они всё равно остаются зависимыми друг от друга. И минуты в любом случае будут прибавляться только если секунд станет 60.

Answer 2

Предложу свой вариант, для краткости:

let t = document.querySelector('time'); 
t.started = new Date; 
t.update = ms => t.innerHTML = new Date(ms).toISOString().split(/T|\./)[1] 
setInterval(() => t.update(new Date - t.started), 500);
<time>00:00:00</time>

READ ALSO
Как обратится через js к css
javascript

Как обратится через js к css

есть вот такой элемент #m151 в css как к нему обратится через js? и передать параметр none

 111
Из input вывести в div
javascript

Из input вывести в div

В input вводишь дату, время, текст - все это через запятуюЭто все нужно вывести в div, но не просто как текст, а все в разный p или span, разницы особо...

 103
Нужно разбить строку введенную в input
javascript

Нужно разбить строку введенную в input

В input ввожу 3 слова через запятую, после клика на кнопку эти слова должна быть отображены в разных div'ах или в разных p

 106
WebAssembly. C++ строки
javascript

WebAssembly. C++ строки

Ребята, помогите, я обычный студент, которому нужно сдать курсачУ меня есть функция на C++, которая возвращает std::string

 140