Секундомер на js

113
21 августа 2019, 08:40

Подскажите пожалуйста, есть код js секундомера:

<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <title>Таймер</title> 
        <script type="text/javascript"> 
            function init() 
            { 
                sec = 0; 
                setInterval(tick, 1000); 
            } 
             
            function tick() 
            { 
                sec++; 
                document.getElementById("timer"). 
                    childNodes[0].nodeValue = sec; 
            } 
        </script> 
    </head> 
    <body onload="init()"> 
        <div id="timer">0</div> 
    </body> 
</html>

В этом коде секунды просто идут в перед. Как сделать что бы был такой вид минуты:секундны, и после 60 сек была 1 мин, вообщем обычный секундомер.

Answer 1

Как один из вариатов, обычный секундомер:

window.onload = () => { 
  StartStop(); 
} 
 
//объявляем переменные 
var base = 60; 
var clocktimer, dateObj, dh, dm, ds, ms; 
var readout = ''; 
var h = 1, 
  m = 1, 
  tm = 1, 
  s = 0, 
  ts = 0, 
  ms = 0, 
  init = 0; 
 
//функция для очистки поля 
function ClearСlock() { 
  clearTimeout(clocktimer); 
  h = 1; 
  m = 1; 
  tm = 1; 
  s = 0; 
  ts = 0; 
  ms = 0; 
  init = 0; 
  readout = '00:00:00'; 
  document.MyForm.stopwatch.value = readout; 
} 
 
//функция для старта секундомера 
function StartTIME() { 
  var cdateObj = new Date(); 
  var t = (cdateObj.getTime() - dateObj.getTime()) - (s * 1000); 
  if (t > 999) { 
    s++; 
  } 
  if (s >= (m * base)) { 
    ts = 0; 
    m++; 
  } else { 
    ts = parseInt((ms / 100) + s); 
    if (ts >= base) { 
      ts = ts - ((m - 1) * base); 
    } 
  } 
  if (m > (h * base)) { 
    tm = 1; 
    h++; 
  } else { 
    tm = parseInt((ms / 100) + m); 
    if (tm >= base) { 
      tm = tm - ((h - 1) * base); 
    } 
  } 
  ms = Math.round(t / 10); 
  if (ms > 99) { 
    ms = 0; 
  } 
  if (ms == 0) { 
    ms = '00'; 
  } 
  if (ms > 0 && ms <= 9) { 
    ms = '0' + ms; 
  } 
  if (ts > 0) { 
    ds = ts; 
    if (ts < 10) { 
      ds = '0' + ts; 
    } 
  } else { 
    ds = '00'; 
  } 
  dm = tm - 1; 
  if (dm > 0) { 
    if (dm < 10) { 
      dm = '0' + dm; 
    } 
  } else { 
    dm = '00'; 
  } 
  dh = h - 1; 
  if (dh > 0) { 
    if (dh < 10) { 
      dh = '0' + dh; 
    } 
  } else { 
    dh = '00'; 
  } 
  readout = dh + ':' + dm + ':' + ds; 
  document.MyForm.stopwatch.value = readout; 
  clocktimer = setTimeout("StartTIME()", 1); 
} 
 
//Функция запуска и остановки 
function StartStop() { 
  if (init == 0) { 
    ClearСlock(); 
    dateObj = new Date(); 
    StartTIME(); 
    init = 1; 
  } else { 
    clearTimeout(clocktimer); 
    init = 0; 
  } 
}
<form name=MyForm> 
  <input name=stopwatch size=10 value="00:00:00.00" disabled> 
</form>

READ ALSO
Как вызвать события при нажатия на кнопку enter? [закрыт]

Как вызвать события при нажатия на кнопку enter? [закрыт]

Есть поле ввода имени и пароля, а также кнопка входаПосле ввода правильного пароля и имени нужно, чтобы нажатие на кнопку enter вызывала функцию...

122
не знаю как назвать body background для js

не знаю как назвать body background для js

Eсть задача сделать интерактивный фон для сайта, чтобы он чуть двигался от движения мышиЧто-то вроде этого

104
Как разместить два блока на одной строке? [закрыт]

Как разместить два блока на одной строке? [закрыт]

Подскажите, как правильно разместить два блока, которые обведены красной рамкой? (без использования фреймворков)

104
Как получить массив данных из java servlet в коде javascript на странице?

Как получить массив данных из java servlet в коде javascript на странице?

Разбираю окно поиска с автозаполнением и столкнулся с вопросом, как передать данные из сервлета в страницу html использующую javascriptкод самого...

98