Javascript的多个实际时间（GetElementById）

Question

I want to show multiple actual time on one page. The script works, but not very efficient for a user. I feel like a amateur right now...

My script is this right now:

<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>

It's not a very efficient way to do this...

Anybody a better way?

Thanks in advance!

Answer 1

 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> 

Also, you could use some thir party lib like MomentJS to do the trick

Update

Now is Vanilla Js Only =D

Answer 2

I loved @JaredSmith's version in the comment and since he's not posting it as an answer, here it is:

 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> 

As commenters have pointed, you do not need to run multiple timers. Get the time at whatever rate you want, then you can display that same information in as many places as you like.

EDIT: we don't need Array.from in modern browsers as querySelectorAll is iterable with forEach .

Here is a Internet Explorer compatible version, which is also a de-composed version that may be easier to follow:

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