-2

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?

0

5 Answers 5

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>

8
  • Your first one moves and the second one is faster than once a second ;)
    – mplungjan
    Commented Mar 29, 2017 at 15:41
  • @mplungjan Sure it does, he didn't really specify that :) I really don't care, if I would, I would use like courier new or something :)
    – Icepickle
    Commented Mar 29, 2017 at 15:43
  • But when it blinks too fast it does not look realistic :P
    – mplungjan
    Commented Mar 29, 2017 at 15:44
  • @mplungjan Only for you, I made it blink slower and it no longer moves in the first example ^_^;;
    – Icepickle
    Commented Mar 29, 2017 at 15:47
  • Not sure why you were voted down... perhaps someone really do not want us to answer poor questions
    – mplungjan
    Commented Mar 29, 2017 at 17:02
3

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

5
  • Brilliant, you even updated it to an improved version before I could write a comment on the moving values after changing the colon xD. Commented Mar 29, 2017 at 15:35
  • :) Yeah, I did not like that either
    – mplungjan
    Commented Mar 29, 2017 at 15:36
  • I was thinking you could blink the colon with CSS, although you'd still need the interval to update the time, so it's pretty redundant: jsfiddle.net/uw4et1a0 Commented Mar 29, 2017 at 15:37
  • @RoryMcCrossan Nice! j08691 did something similar in his deleted answer
    – mplungjan
    Commented Mar 29, 2017 at 15:38
  • @RoryMcCrossan Once we're using CSS animations anyway, we can let the animation clock take over the heavy lifting from setInterval for the time changes, too: jsfiddle.net/pnichols04/19sz7k7e
    – Phil N.
    Commented Mar 29, 2017 at 16:02
1

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; }
}
0

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.

-1

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

3
  • That will not update on a page and the seconds will move a millimeter since a space is smaller than a colon. You need to use something the same width as a space
    – mplungjan
    Commented Mar 29, 2017 at 15:37
  • Hah, I suppose so. Could do a nearly pure CSS example too using a white square.But I guess im more about the logic of the thing :) Commented Mar 29, 2017 at 15:42
  • Someone does not like we answer poor questions :/
    – mplungjan
    Commented Mar 29, 2017 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.