2012-05-06 2 views
2

다음 웹 사이트에서 시간을 표시하는 데 다음 자바 스크립트 코드를 사용하고 있습니다. 이 업데이트를 어떻게 자동으로 만들 수 있습니까?자바 스크립트 시간을 자동으로 업데이트하는 방법

감사

<section class="portlet grid_6 leading"> 
<header> 
<h2>Time<span id="time_span"></span></h2> 
</header> 
<script type="text/javascript"> 
var currentTime = new Date() 
var hours = currentTime.getHours() 
var minutes = currentTime.getMinutes() 
if (minutes < 10){ 
    minutes = "0" + minutes 
} 
var t_str = hours + ":" + minutes + " "; 
if(hours > 11){ 
    t_str += "PM"; 
} else { 
    t_str += "AM"; 
} 
document.getElementById('time_span').innerHTML = t_str; 
</script> 
</section> 
+1

in action PHP와 함께 할이 가지고 무엇? – Sietse

답변

9

사용 setTimeout(..) 특정 시간 후에 함수를 호출합니다. 이 특정한 경우, setInterval(..)


function updateTime(){ 
    var currentTime = new Date() 
    var hours = currentTime.getHours() 
    var minutes = currentTime.getMinutes() 
    if (minutes < 10){ 
     minutes = "0" + minutes 
    } 
    var t_str = hours + ":" + minutes + " "; 
    if(hours > 11){ 
     t_str += "PM"; 
    } else { 
     t_str += "AM"; 
    } 
    document.getElementById('time_span').innerHTML = t_str; 
} 
setInterval(updateTime, 1000); 
0

가하는 정돈 버전이 시도 :

var el = document.getElementById('time_span') 
setInterval(function() { 

    var currentTime = new Date(), 
     hours = currentTime.getHours(), 
     minutes = currentTime.getMinutes(), 
     ampm = hours > 11 ? 'PM' : 'AM'; 

    hours += hours < 10 ? '0' : ''; 
    minutes += minutes < 10 ? '0' : ''; 

    el.innerHTML = hours + ":" + minutes + " " + ampm; 
}, 1000); 
+0

'setInterval'을 피하십시오. http://weblogs.asp.net/bleroy/archive/2009/05/14/setinterval-is-moderately-evil.aspx – KooiInc

+0

모든 것을 작성하십시오. 제목은 'setinterval은 (보통) 악'입니다. 나는 전체 기사를 읽었다. 유일한 주요 부정적인 점은 디버거에 관한 것이 었습니다 - 당신이 디버거의 '단계를 넘어서'기능을 사용한다면, 전혀 큰 문제는 아닙니다. 둘째, setInterval은 이전 호출이 실행되었는지 여부에 관계없이 실행 된 nomatter이므로이 함수는 시계에 관한 것이므로 이전 호출은 중요하지 않습니다. 사실 setTimeout은 여기에서 완벽하게 작동 할 것이고, 그것은 setInterval을 사용하게하는 직감이었습니다. –

+0

그리고 문자의 제한으로 인해 별도의 의견으로 언급해야하는 또 다른 사항은 함수를 다시 등록하면 코드에 복잡성이 추가된다는 것입니다 (비록 거의 없지만). 그래서 이전에 말했듯이 부분적으로 코드 복잡성 때문에 setInterval이 더 좋아졌습니다. –

1

이 페이지의 <head> 섹션에 배치 updateClock()라는 함수에서 모든 자바 스크립트 코드를 추가를하고 <body> 태그를 변경 아마도이 이전 게시물을 확인 그런 식으로 :

<body onload="updateClock(); setInterval('updateClock()', 1000)"> 

매초마다 시간을 다시 계산하고 다시 표시합니다. 시간과 분만 표시되므로 더 긴 간격을 사용할 수 있습니다. 당신은 시간마다 numSeconds를 업데이트 할 경우

<body onload="updateClock(); setInterval('updateClock()', numSeconds * 1000)"> 

같은 물론 것을 사용한다,이 하나 하나 당신이 out there을 찾을 수있는 많은 gazillions 솔루션입니다.

0

조금 덜 혼란이있을 것이다 :

timer(); 

function timer(){ 
var now  = new Date, 
    hours = now.getHours(), 
    ampm = hours<12 ? ' AM' : ' PM', 
    minutes = now.getMinutes(), 
    seconds = now.getSeconds(), 
    t_str = [hours-12, //otherwise: what's the use of AM/PM? 
       (minutes < 10 ? "0" + minutes : minutes), 
       (seconds < 10 ? "0" + seconds : seconds)] 
       .join(':') + ampm; 
document.getElementById('time_span').innerHTML = t_str; 
setTimeout(timer,1000); 
} 

타이머 갱신 대략적 초마다 (= 1000 밀리 초), 타이머 기능 내에서 setTimeout을 사용.

는보기 그것을

-1

timer(); 
 

 
function timer(){ 
 
var currentTime = new Date() 
 
var hours = currentTime.getHours() 
 
var minutes = currentTime.getMinutes() 
 
var sec = currentTime.getSeconds() 
 
if (minutes < 10){ 
 
    minutes = "0" + minutes 
 
} 
 
if (sec < 10){ 
 
    sec = "0" + sec 
 
} 
 
var t_str = hours + ":" + minutes + ":" + sec + " "; 
 
if(hours > 11){ 
 
    t_str += "PM"; 
 
} else { 
 
    t_str += "AM"; 
 
} 
 
document.getElementById('time_span').innerHTML = t_str; 
 
setTimeout(timer,1000); 
 
}
<header> 
 
<h2>Time<span id="time_span"></span></h2> 
 
</header>

0
/*this code output format->00:00:00 and refresh automatically like real       time clock,hope it works..*/ 
<script> 
function r(txt){ 
document.write(tex); 
    } 
function createTIME(){ 
d = new Date(); 
var time=addZERO(d.getHours())+':'+addZERO(d.getMinutes())+':'+ 
addZERO(d.getSeconds()); 
return 'Present Time = '+time; 
} 
function doDyn(){ 
document.getElementById('Dyn').innerHTML = createTIME(); 
} 

function addZERO(val){ 
return ((val<10)?'0':'')+val; 
} 
</script> 
+2

몇 가지 설명을 제공합니다. – Zeina

관련 문제