웹 페이지의 유니버설 순환 카운트 다운 타이머

Question

내 웹 사이트에 넣을 타이머를 찾고 있는데 타이머를 1 시간 동안 설정하고 0으로 카운트 한 후 다시 한 시간으로 다시 설정합니다. 보편적이어야하므로 모든 사용자에게 동일하게 표시되며 페이지를 새로 고치면 다시 1 시간으로 재설정되지 않습니다. 나는 이것이 비교적 간단하다고 생각하지만, 내가 발견 할 수있는 것은 모두 특정 시간 및 카운트에 포함되는 타이머 또는 충분하지 않은 페이지 새로 고침 이후 0에서 시작하는 타이머였습니다.

누군가가 도움을 줄 수 있거나 링크를 알고있는 경우 해당 정보를 사용하면 좋을 것입니다.

미리 감사드립니다.

Answer 1

왜 현재 시간을 가져 오지 않고 분만 표시합니까? 그렇지 않으면 서버 측에서 수행해야합니다.

Answer 2

당신은 타이머가 단지 UTC의 현재 분, 초의 보수를 표시 할 수 :

​setInterval(function() { 
    var d = new Date; 
    var s = (60 - d.getUTCMinutes()) + ":" + (60 - d.getUTCSeconds()); 
    $("#time").text(s); 
}, 250);​  

다음은 행동에서 볼 수있는 demo page입니다.

Answer 3

이 목적으로 아약스를 사용할 수 있습니다. 약 60 분 동안 서버에 데이터베이스 항목을 작성하고 Ajax 요청으로 클라이언트에 시간을 업데이트하면 클라이언트 측 스크립트보다 더 안전합니다.

Answer 4

초마다 똑딱 거리는 타이머를 원한다면 setInterval은 좋지 않은 선택입니다. 요청 된 간격으로 만 실행되며 천천히 표류합니다. 당신이 그것을 자주 호출하지 않으면 그것을 사용하는 시계가 부드럽 지 않을 것이며, 이는 낭비입니다.

더 나은 전략은 setTimeout을 사용하여 순차적으로 자체를 호출하고 시간을 기준으로 한 지연 시간을 다음 틱에 더한 금액으로 설정하는 것입니다. 예 : 아주 간단한 시계 :

<script> 

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

function update() { 
    var d = new Date(); 
    // Set lag to 20ms after next full second 
    var lag = 1020 - d.getMilliseconds(); 

    document.getElementById('d0').innerHTML = addZ(d.getHours()) + ':' + 
    addZ(d.getMinutes()) + ':' + addZ(d.getSeconds()); 

    setTimeout(update, lag); 
} 

window.onload = update; 
</script> 
<div id="d0"></div> 

당신이 당신의 카운터 시스템 클럭을 사용하여 만족, 당신은, 당신이 날짜의 UTC methods 사용할 수 있습니다 (자세한 이하) 모두가 같은 번호를 보려면 : getUTCHours, getUTCMinutes 및 getUTCSeconds.

Answer 5

여기에 도움이 될 것입니다.

ctsecs--; 
if(ctsecs < 0) { 
    if(ctmnts > 0) { 
     ctsecs = 59; 
     ctmnts--; 
     if(cthrs > 0) { 
      ctmnts = 59; 
      cthrs--; 
     } else { 
      ctsecs = 0; 
      ctmnts = 0; 
      cthrs = 0; 
     } 
    } 
}