0

Сделал секундомер на 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>

2 ответа 2

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.

2
  • спасибо за подсказку. Сделал примерно тоже самое со своей функцией, закинув минуты в функцию секунд в строчку, когда секунды равны 60, то прибавлять к минуте 1. Зарабтало)
    – Павел
    4 мая 2019 в 6:08
  • omg, какая дичь ! 4 мая 2019 в 7:59
1

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

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.