Question

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

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

，例如显示如下：

16点13

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

Answer 1

我很感兴趣，所以我忍不住回答。

var toggle = true;
setInterval(function() {
  var d = new Date().toLocaleTimeString('en-US', { hour12: false, hour: 'numeric', minute: 'numeric' });
  var parts = d.split(":");
  $('#hours').text(parts[0]);
  $('#minutes').text(parts[1]);
  $("#colon").css({ visibility: toggle?"visible":"hidden"});
  toggle=!toggle;
},1000);

#colon { visibility:hidden }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="hours"></span><span id="colon">:</span><span id="minutes"></span>
</div>

Answer 2

我完全赞同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>

Answer 3

如果您在使用 @mplungjan 时遇到问题

替换

clockEl.innerText = time.split(':').join(' ');

与

clockEl.innerText = time.split(':').join("\u2009");

解决搬家问题。

Answer 4

所以我和其他 JavaScript 答案一起玩，但由于我在网站上运行了很多，这意味着时钟滴答被其他所有运行的东西减慢了。

我意识到有一个简单的 CSS 解决方案。

function getTime() {
  return new Date().toLocaleTimeString('en-US', { timeZone: 'Europe/London', hour: 'numeric', minute: '2-digit' });
}

然后渲染

<h4>
  {time[0]}
  <span className="timeSep">:</span>
  {time[1]}
</h4>

并添加 CSS

.timeSep{
  animation: blink 2s linear infinite;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  49%  { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}

Answer 5

是的，还是有点好玩，这里有一个稍微冗长的es6例子

function blinkingTime() {
  const timeString = new Date().toLocaleTimeString('en-US', {
    hour12: false,
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric'
  });
  const [hours, mins, seconds] = timeString.split(':');
  const centreChar = seconds % 2 === 0 ? ':' : ' ';
  return `${hours}${centreChar}${mins}`;
}

function updateTime() {
  console.log(blinkingTime());
  setTimeout(updateTime, 1000);
}

updateTime();

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

5 个答案: