자바 스크립트 시계 사용자 정의 시간을 기반으로

Question

나는 아래의 스크립트를 사용하고 있으며, 내가 뭘 하려는지 스크립트에 사용자 정의 시간을 설정하고 매 시간을 다시 설정하지 않고 자동으로 업데이 트하는 것입니다 . NaN의 : NaN이을 : 나는 스크립트를 실행하면이 표시

(I 번만 시간을 설정하고 시간을 추적하고 표시하기 위해 내 스크립트를하고자 할) 다음과 NaN의 AM

내 코드가 될 때 :

<div id="js_clock"> display clock here </div> 

<script language="javascript"> 
    function js_clock(clock_time) 
    { 
     var clock_hours = clock_time.getHours(); 
     var clock_minutes = clock_time.getMinutes(); 
     var clock_seconds = clock_time.getSeconds(); 
     var clock_suffix = "AM";  
     if (clock_hours > 11){ 
     clock_suffix = "PM"; 
     clock_hours = clock_hours - 12; 
     } 
     if (clock_hours == 0){ 
     clock_hours = 12; 
     } 

     if (clock_hours < 10){ 
     clock_hours = "0" + clock_hours; 
     } 

     if (clock_minutes < 10){ 
     clock_minutes = "0" + clock_minutes; 
     } 

     if (clock_seconds < 10){ 
     clock_seconds = "0" + clock_seconds; 
     } 

     var clock_div = document.getElementById('js_clock'); 
     clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix; 
     setTimeout("js_clock()", 1000); 
    } 

    var serverTime = new Date("09:20:50"); 
    js_clock(serverTime); 
</script> 

Answer 1

코드에 다음과 같은 심각한 결함이 있습니다.

setTimeout은 정확하게 설정된 간격으로 실행되지 않지만 이후에 가능한 한 빨리이 시계가 천천히 이동합니다.

Date에 문자열을 전달하고 올바르게 구문 분석되기를 기대하는 경우 문제가 발생합니다. ECMA-262 ed 3에서는 완전히 구현에 종속적이었습니다. ES5에서 문자열은 ISO8601 긴 형식의 사용자 정의 버전이어야합니다 (그러나 사용중인 모든 브라우저가 ES5를 지원하지는 않습니다.).

마지막으로 클라이언트가 사용 중이면이 기능이 몇 초 동안 실행되지 않아 시계가 클라이언트 시계를 기반으로해야하고 시간차가 조정되어야합니다.

다음 함수는 위의 모든 작업을 수행합니다.

<script type="text/javascript"> 
var customClock = (function() { 

    var timeDiff; 
    var timeout; 

    function addZ(n) { 
    return (n < 10? '0' : '') + n; 
    } 

    function formatTime(d) { 
    return addZ(d.getHours()) + ':' + 
      addZ(d.getMinutes()) + ':' + 
      addZ(d.getSeconds()); 
    } 

    return function (s) { 

    var now = new Date(); 
    var then; 

    // Set lag to just after next full second 
    var lag = 1015 - now.getMilliseconds(); 

    // Get the time difference if first run 
    if (s) { 
     s = s.split(':'); 
     then = new Date(now); 
     then.setHours(+s[0], +s[1], +s[2], 0); 
     timeDiff = now - then; 
    } 

    now = new Date(now - timeDiff); 

    document.getElementById('clock').innerHTML = formatTime(now); 
    timeout = setTimeout(customClock, lag); 
    } 
}()); 


window.onload = function() { 
    customClock('09:20:50'); 
} 

</script> 

<div id="clock"></div> 

Answer 2

난 당신이 js_clock()에 인수를 전달 잊어 버린 것 같아요. 어쩌면 당신은 어떻게 갈까요 :

setTimeout(
    function() { 
     //Call the function again updating seconds by 1 
     js_clock(
      new Date(
       clock_time.getFullYear(), 
       clock_time.getMonth(), 
       clock_time.getDate(), 
       clock_time.getHours(), 
       clock_time.getMinutes(), 
       clock_time.getSeconds() + 1 
      ) 
     ); 
    }, 
    1000 
); 

편집 : 나는 이것이 하나의 함수 호출 함께 할 수있는 지점 놓친 :

이

setTimeout(
    function() { 
     js_clock(new Date(+clock_time + 1000)); 
    }, 
    1000 
); 

+clock_time 문은 UNIX에서 밀리 초로 Date 객체로 변환을 Epoch이므로 시간을 업데이트하는 것은 1000 밀리 초를 합산하는 것처럼 간단합니다. 사용자에게 감사드립니다.

Answer 3

날짜를 만들 때 문제가 발생했습니다. new Date("09:20:50");은 잘못된 날짜를 반환합니다.

당신이 시간의 분을 설정하려는 및 초

new Date(year, month, day [, hour, minute, second, millisecond ]) 

를 사용하거나 살펴 here을합니다.

은 또한 당신이의 setTimeout에 날짜를 통과하는 것을 잊었다, 시도 :

setTimeout(function() { 
    js_clock(new Date(/*pass hours minutes and seconds here*/)) 
}, 1000); 

Answer 4

WAIT를! 그냥 실현, 이것은 여전히 ​​정확한 시간을 보이지 않습니다. 오류는 사라졌지 만 시간은 당신이 찾고있는 것이 아닙니다.

window.js_clock = function js_clock(clock_time) { 
    var clock_hours = clock_time.getHours(); 
    var clock_minutes = clock_time.getMinutes(); 
    var clock_seconds = clock_time.getSeconds(); 
    var clock_suffix = "AM"; 
    if (clock_hours > 11) { 
     clock_suffix = "PM"; 
     clock_hours = clock_hours - 12; 
    } 
    if (clock_hours === 0) { 
     clock_hours = 12; 
    } 

    if (clock_hours < 10) { 
     clock_hours = "0" + clock_hours; 
    } 

    if (clock_minutes < 10) { 
     clock_minutes = "0" + clock_minutes; 
    } 

    if (clock_seconds < 10) { 
     clock_seconds = "0" + clock_seconds; 
    } 

    var clock_div = document.getElementById('js_clock'); 
    clock_div.innerHTML = clock_hours + ":" + clock_minutes + ":" + clock_seconds + " " + clock_suffix; 
    setTimeout("js_clock(new Date())", 1000); 
} 

var serverTime = new Date("09:20:50"); 
window.js_clock(serverTime);​