像真正的数字时钟一样闪烁时间

Question

我以这种方式显示当前时间：

$('#mydiv').html(
   new Date().toLocaleTimeString('en-US', 
     { hour12: false, hour: 'numeric', minute: 'numeric' }));

它的显示方式如下：

16:13

如何让两个点像真正的数字时钟一样每秒闪烁一次？

Answer 1

我完全同意mplungjan，有更好的问题要问，但是，这似乎也很有趣:)

闪烁的部分，你实际上可以用 CSS 来做，不需要 javascript 技巧（见第二个例子）

var clockEl = document.querySelector('#clock');

function getTime() {
  return new Date().toLocaleTimeString('en-US', 
     { hour12: false, hour: 'numeric', minute: 'numeric' }).toString();
}

function setTime() {
  var time = getTime();
  // check if the colon is there
  if (clockEl.innerText.split(':').length === 1) {
    // if it's not, set the actual time
    clockEl.innerText = time;
  } else {
    // if it is, remove the colon
    clockEl.innerText = time.split(':').join(' ');
  }
}

setInterval( setTime , 1000);
setTime();

#clock { font-family: 'Courier new' }

<div id="clock"></div>

var oldTime;

function setTime() {
  var time = new Date().toLocaleTimeString('en-US', 
     { hour12: false, hour: 'numeric', minute: 'numeric' });
  if (oldTime === time) {
    return;
  }
  oldTime = time;
  time = time.split(':');
  document.querySelector('#hours').innerText = time[0];
  document.querySelector('#minutes').innerText = time[1];
}

setInterval( setTime, 1000);
setTime();

.separator {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {  
  50% { opacity: 0; }
}

<div class="clock">
  <span id="hours"></span>
  <span class="separator">:</span>
  <span id="minutes"></span>
</div>