Javascript複数の実際の時間（GetElementById）

Question

1つのページに複数の実際の時間を表示したい。 スクリプトは機能しますが、非常に効率的ではありません。私は今、アマチュアのように感じる ...

私のスクリプトは、この権利は以下のようになります。

<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

です私はコメントで@ JaredSmithのバージョンを愛し、さんは答えとして、それを投稿していない、ここにある：コメンターとして

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>

指摘している、あなたは複数のタイマーを実行する必要はありません。あなたが望むどんなレートでも時間を取得し、同じ情報を好きなだけ多くの場所に表示することができます。

編集：近代的なブラウザではArray.fromは不要です。querySelectorAllはforEachで繰り返されます。

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を使用することができます更新

今バニラのJsのみ= D