javascript - Blink the time like a real digital clock - Stack Overflow

admin管理员组

文章数量:1401925

I am displaying the current time like this way :

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

and it is displayed for example like this :

16:13

How is it possible to make the two dots blink every one second like a real digital clock?

I am displaying the current time like this way :

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

and it is displayed for example like this :

16:13

How is it possible to make the two dots blink every one second like a real digital clock?

• javascript
• jquery

Share Improve this question Follow edited Mar 29, 2017 at 15:20 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Mar 29, 2017 at 15:18 Mehdi SouregiMehdi Souregi 3,27555 gold badges3838 silver badges5858 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

I fully agree with mplungjan, that there are better questions to ask, however, it also seemed fun todo :)

The blinking part, you could actually do with CSS, no need for javascript tricks (see the second example)

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>

I was intrigued so I could not help answering.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="hours"></span><span id="colon">:</span><span id="minutes"></span>
</div>

So I played along with the other JavaScript answers, but as I am running quite a lot on the website this meant the clock ticking was slowed by everything else running.

I realized instead there is a trivial CSS solution.

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

Then rendering

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

And adding the CSS

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

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

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

If you are having a moving issue with @mplungjan

Replace

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

with

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

to solve the moving issue.

Yeah, still a bit of fun, here's a slightly more verbose es6 example

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();

本文标签： javascriptBlink the time like a real digital clockStack Overflow