计时器不准确

Question

我正在构建一个活动计时器，但我的代码无法正常工作。计时器比实时快约40％。出了什么问题？

var sec = 00;
var min = 00;
var hr = 00;
var t;
var timer_is_on = 0;

function timedCount() {

  if (min == 0) {
    min = 1;
  }
  document.getElementById('seconds').value = sec;

  document.getElementById('minutes').value = min;
  $('.node-form .form-item:nth-child(4) input').val(min);

  document.getElementById('hours').value = hr;
  $('.node-form .form-item:nth-child(3) input').val(hr);

  sec = sec + 1;
  if (sec == 60) {
    sec = 0;
    min = min + 1;
    if (min == 60) {
      min = 1;
      hr = hr + 1;
    }
  }
  t = setTimeout("timedCount()", 1000);
}

function doTimer() {
  if (!timer_is_on) {
    timer_is_on = 1;
    timedCount();
  }
}

function stopCount() {
  clearTimeout(t);
  timer_is_on = 0;
}

function resetCount() {
  stopCount();
  sec = 0;
  min = 0;
  hr = 0;
  document.getElementById('hours').value = 00;
  $('.node-form .form-item:nth-child(3) input').val('0');
  document.getElementById('minutes').value = 00;
  $('.node-form .form-item:nth-child(4) input').val('0');
  document.getElementById('seconds').value = 00;
}

function putInTimelog() {
  // Put hours
  var hourItems = [];
  var hourFields = document.getElementById("node-form").getElementsByTagName("input");
  for (var i = 0; i < hourFields.length; i++) {
    //omitting undefined null check for brevity
    if (hourFields[i].id.lastIndexOf("edit-field-timelog-hours-0-value-", 0) === 0) {
      hourItems.push(hourFields[i]);
    }
  }
  var hourField = 'edit-field-timelog-hours-0-value-';
  hourField = hourField.concat(hourItems.length);
  document.getElementById(hourField).value = hr;
  // Put minutes
  var minuteItems = [];
  var hourFields = document.getElementById("node-form").getElementsByTagName("input");
  for (var i = 0; i < hourFields.length; i++) {
    //omitting undefined null check for brevity
    if (hourFields[i].id.lastIndexOf("edit-field-timelog-minutes-0-value-", 0) === 0) {
      minuteItems.push(hourFields[i]);
    }
  }
  var minuteField = 'edit-field-timelog-minutes-0-value-';
  minuteField = minuteField.concat(minuteItems.length);
  alert(minuteField);
  alert((minuteField).length);
  document.getElementById(minuteField).value = min;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <span class="timer-title"><strong>Activity timer</strong></span>h:
  <input id="hours" readonly="readonly" size="2" type="text" />&nbsp;m:
  <input id="minutes" readonly="readonly" size="2" type="text" />&nbsp;s:
  <input id="seconds" readonly="readonly" size="2" type="text" /><span class="timer-buttons"><input onclick="doTimer()" type="button" value="Start" /> <input onclick="stopCount()" type="button" value="Stop" /> <input onclick="resetCount()" type="button" value="Reset" /> </span>
</form>

View on JSFiddle

Answer 1

clock.js是我的repo，当与window.setInterval（）一起使用时可能会有所帮助。包含工作示例。

将<script src="https://rack.pub/clock.min.js"></script>添加到HTML中，然后在每次需要时间快照时调用clock.now --> 1462248501241。您可以直观地添加和减去。

实际的js看起来像：

var clock = (function() {

    // object to expose as public properties and methods such as clock.now
    var pub = {};

    //clock.now
    Object.defineProperty(pub, "now", {
        get: function () { 
            return Date.now();
        }
    });

    //API
    return pub;
}());

＆＃13;

＆＃13;

    var doc = document;
    var el = doc.getElementById('output');
    window.setInterval(function(){
      /// call your function here
      el.innerHTML = clock.what.time(clock.now);
      
    }, 500);

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rack.pub/clock.min.js"></script>
    <h2 id='output'></h2>

＆＃13;

＆＃13;

＆＃13;