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

Понадобилось быстро измерить несколько промежутков времени, но за телефонами лень тянуться, а в инете, как обычно, только странные кодики, хотя и с правильной идеей :) В общем, тоже как обычно, быстрее написать самому, что и делаю в этой заметке.

Для работы нужен включённый Javascript. Просто задайте метку события - любую строку (можно и не задавать) и нажмите кнопку "Старт/Стоп". Следующее её нажатие остановит отсчёт и добавит запись в лог под формой. Лог пишется как на форуме, то есть, "сверху вниз". Сбросить всё вместе с логом - вторая кнопка. Точность - до сотых долей секунды, требовать большего от персоналки бессмысленно. Исходник очень прост и его легко поменять.

Вот скрипт в работе:

Извините, для работы приложения нужен включённый JavaScript

Вот полный исходник скрипта:

<script type="text/javascript">
 function trim(string) { return string.replace (/\s+/g, " ").replace(/(^\s*)|(\s*)$/g, ''); }
 var init=0;
 var startDate;
 var clocktimer;

 function clearFields() {
  init = 0;
  clearTimeout(clocktimer);
  document.clockform.clock.value='00:00:00.00';
  document.clockform.label.value='';
 }

 function clearALL() {
  clearFields();
  document.getElementById('marker').innerHTML = '';
 }

 function startTIME() { 
  var thisDate = new Date();
  var t = thisDate.getTime() - startDate.getTime();
  var ms = t%1000; t-=ms; ms=Math.floor(ms/10);
  t = Math.floor (t/1000);
  var s = t%60; t-=s;
  t = Math.floor (t/60);
  var m = t%60; t-=m;
  t = Math.floor (t/60);
  var h = t%60;
  if (h<10) h='0'+h;
  if (m<10) m='0'+m;
  if (s<10) s='0'+s;
  if (ms<10) ms='0'+ms;
  if (init==1) document.clockform.clock.value = h + ':' + m + ':' + s + '.' + ms;
  clocktimer = setTimeout("startTIME()",10);
 }

 function findTIME() {
  if (init==0) {
   startDate = new Date();
   startTIME();
   init=1;
  } 
  else {
   var str = trim(document.clockform.label.value);
   document.getElementById('marker').innerHTML = (str==''?'':str+': ') + 
    document.clockform.clock.value + '<br>' + document.getElementById('marker').innerHTML;
   clearFields();
  }
 }
</script>
<noscript><p>Извините, для работы приложения нужен включённый JavaScript</p></noscript>

<form name="clockform">
 <p>Время: 
 <input name="clock" size="12" maxlength="12" value="00:00:00.00">
 Метка: 
 <input name="label" size="12" maxlength="40" value="">
 <input name="starter" type="button" value="Старт/Стоп" onclick="findTIME()"> 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input name="clearer" type="button" value="Сбросить всё" onclick="clearALL()">
 </p><p id="marker">
 </p>
</form>

Он также поможет ответить на вопрос "как преобразовать миллисекунды (время t в методе startTIME) в часы, минуты, секунды и сотые доли".

Если нужно ещё и суммарное время, потраченное на все отсчёты, скрипт можно изменить так:

<script type="text/javascript">
 function trim(string) { return string.replace (/\s+/g, " ").replace(/(^\s*)|(\s*)$/g, ''); }
 var init=0;
 var startDate,thisDate,tdiff;
 var clocktimer;
 var sum=0;

 function clearFields() {
  init = 0;
  clearTimeout(clocktimer);
  document.clockform.clock.value='00:00:00.00';
  document.clockform.label.value='';
 }

 function clearALL() {
  clearFields();
  document.getElementById('marker').innerHTML = '';
  sum = 0;
  document.getElementById('markerSum').innerHTML = '';
 }

 function timeToStr (t) {
  var ms = t%1000; t-=ms; ms=Math.floor(ms/10);
  t = Math.floor (t/1000);
  var s = t%60; t-=s;
  t = Math.floor (t/60);
  var m = t%60; t-=m;
  t = Math.floor (t/60);
  var h = t%60;
  if (h<10) h='0'+h;
  if (m<10) m='0'+m;
  if (s<10) s='0'+s;
  if (ms<10) ms='0'+ms;
  return h + ':' + m + ':' + s + '.' + ms;
 }

 function startTIME() { 
  thisDate = new Date();
  tdiff = thisDate.getTime() - startDate.getTime();
  var str = timeToStr (tdiff);
  if (init==1) document.clockform.clock.value = str;
  clocktimer = setTimeout("startTIME()",10);
 }

 function findTIME() {
  if (init==0) {
   startDate = new Date();
   startTIME();
   init = 1;
  } 
  else {
   sum += tdiff;
   var str = trim(document.clockform.label.value);
   document.getElementById('marker').innerHTML = (str==''?'':str+': ') + 
    document.clockform.clock.value + '<br>' + document.getElementById('marker').innerHTML;
   document.getElementById('markerSum').innerHTML = 'Всего: ' + timeToStr(sum); 
   clearFields();
  }
 }
</script>
<noscript><p>Извините, для работы приложения нужен включённый JavaScript</p></noscript>

<form name="clockform">
 <p>Время: 
 <input name="clock" size="12" maxlength="12" value="00:00:00.00">
 Метка: 
 <input name="label" size="12" maxlength="40" value="">
 <input name="starter" type="button" value="Старт/Стоп" onclick="findTIME()"> 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input name="clearer" type="button" value="Сбросить всё" onclick="clearALL()">
 </p>
 <p id="markerSum"></p>
 <p id="marker"></p>
</form>

В сотых долях секунды при этом могут быть расхождения из-за асинхронного выполнения яваскрипта.

Для идеально точного результата стоило бы написать отдельный метод для "ручного" сложения меток времени вида hh:mm:ss.ms.

12.03.2015, 13:22 [28988 просмотров]