タイマーが正確でない

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）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; 
}()); 

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

<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>