자바 스크립트 실제 시간 (GetElementById)

Question

한 페이지에 여러 실제 시간을 표시하고 싶습니다. 스크립트는 작동하지만 사용자에게는 그리 효율적이지 않습니다. 내가 지금 아마추어 같은 느낌 ...

내 스크립트는이 권리는 지금 :

<script> 
function startTime() { 
    var today = new Date(); 
    var h = today.getHours(); 
    var m = today.getMinutes(); 
    var s = today.getSeconds(); 
    m = checkTime(m); 
    s = checkTime(s); 
    document.getElementById('time').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time2').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time3').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time4').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time5').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time6').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time7').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time8').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time9').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time10').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time11').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time12').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
    document.getElementById('time13').innerHTML = 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
} 
function checkTime(i) { 
    if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 
    return i; 
} 
</script> 

은이 작업을 수행 할 수있는 매우 효율적인 방법은 아니다 ...

누구나 더 좋은 방법?

미리 감사드립니다. 또한

Answer 1

바닐라 JS입니다 코멘트에서 @ JaredSmith의 버전을 좋아했으며 이후 '이 여기있다, 답변으로 게시하지 S : 댓글이 지적

window.addEventListener('DOMContentLoaded', function() { 
 
    'use strict'; 
 
    (function() { 
 
    var intervalId = setInterval(function() { 
 
     var now = new Date(); 
 
     var h = now.getHours(); 
 
     var m = now.getMinutes(); 
 
     var s = now.getSeconds(); 
 
     m = (m < 10) ? '0' + m : m; 
 
     s = (s < 10) ? '0' + s : s; 
 
     (document.querySelectorAll('.time')).forEach(el => el.textContent = h + ':' + m + ':' + s); 
 
    }, 500); 
 
    }()); // IIFE (Crockford-style) 
 
});

<div class="time"></div> 
 
    <p class="time"></p> 
 
    <span class="time"></span> 
 
    <ul> 
 
     <li class="time"></li> 
 
     <li class="time"></li> 
 
    </ul>

으로, 여러 타이머를 실행할 필요가 없습니다. 원하는 속도로 시간을 확보하십시오. 그런 다음 동일한 정보를 원하는만큼 여러 장소에 표시 할 수 있습니다.

EDIT : forEach으로 querySelectorAll을 반복 할 수 있으므로 현대적인 브라우저에서는 Array.from이 필요하지 않습니다. 여기

도 따라 쉽게 될 수있는 드 구성 버전 인 인터넷 익스플로러 호환 버전입니다 :

var list = document.querySelectorAll('.time'); 
for (var elm in list) { 
    if (list.hasOwnProperty(elm)) { 
     list[elm].textContent = h + ':' + m + ':' + s; 
    } 
} 

Answer 2

function startTime() { 
 
    var today = new Date(); 
 
    var h = today.getHours(); 
 
    var m = today.getMinutes(); 
 
    var s = today.getSeconds(); 
 
    m = checkTime(m); 
 
    s = checkTime(s); 
 
    var elems = document.getElementsByClassName('time'), i; 
 
    for (i in elems) { 
 
     elems[i].innerHTML = h + ":" + m + ":" + s; 
 
    } 
 
    var t = setTimeout(startTime, 500); 
 
} 
 
function checkTime(i) { 
 
    if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 
 
    return i; 
 
} 
 
startTime();

<p class="time"></p> 
 
<a href="#!" class="time"></a>

, 당신은 트릭

에게

업데이트을 할 MomentJS 같은 일부 THIR 파티 lib 디렉토리를 사용할 수 이제 = D