Make a live clock in 00:00 format

Question

How can you make a live clock in 00:00 format? I've included my code down below. Is there a way to do this better or with shorter code?

HTML

<body onload=display_ct();>
<span id='ct'></span>

Now we just need to add the javascript part. This refreshes the clock every second so its "Live". Also it uses functions like getMinutes to fetch the current time.

Javascript

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours( )+ ":" +  x.getMinutes();
document.getElementById('ct').innerHTML = x1;
display_c();
 }

The 1000 milliseconds can be swapped out with more or less. 1000 is equal to 1 second so that would mean 500ms would be .5 seconds.

I'll include my code in an executable here:

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours( )+ ":" +  x.getMinutes();
document.getElementById('ct').innerHTML = x1;
display_c();
 }

<body onload=display_ct();>
<span id='ct'></span>

Just a hint, the minutes are only displayed as single digits, there is no 0, so it shows 15:3 and not 15:03 — hotfix, Nov 26 '20 at 14:03
Please tag appropriately! There is no `php` involved in any of what you have shown. — CBroe, Nov 26 '20 at 14:05
I'm sorry. I'll remove this tag right away! Edit: it's already been done. Thanks! — Mark dG, Nov 26 '20 at 14:05
No, as said in my code. *Is there a way to make it shorter?* There is a bug right now in this snippet where if the time is equal to lets say **15.05** it just shows it as **15.5** — Mark dG, Nov 26 '20 at 14:07
@MarkdG maybe this answer could help: https://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript — hotfix, Nov 26 '20 at 14:07
Does this answer your question? [Making a live clock in javascript](https://stackoverflow.com/questions/39418405/making-a-live-clock-in-javascript) — Liam, Nov 26 '20 at 14:11
You can left pad with 0: (new Date()).getMinutes().toString().padStart(2, '0'); — Andrey Yerokhin, Nov 26 '20 at 14:13

firatozcevahir · Accepted Answer · 2020-11-26T14:11:31.817

You need to use setInterval instead of setTimeout. Additionally you can use padStart() function to add leading zeros to your string values.

Ps: Because you are only showing hours and minutes, the clock will be updated every minute, instead of every seconds.(function still runs every second)

function display_c() {
  var refresh = 1000; // Refresh rate in milli seconds
  mytime = setInterval(display_ct, refresh)
}

function display_ct() {
  var x = new Date()
  x1 = x.getHours().toString().padStart(2,0) + ":" + x.getMinutes().toString().padStart(2,0);
  document.getElementById('ct').innerHTML = x1;
  display_c();
}

<body onload=display_ct();>
  <span id='ct'></span>

This worked. It properly shows the time now! I'll accept this answer in two minutes. — Mark dG, Nov 26 '20 at 14:11

score 1 · Answer 2 · answered Nov 26 '20 at 14:16

make a js inside or out your main page like this

You must have an element with MyClockDisplay as id for this code

    function showTime() {
        var date = new Date();
        var h = date.getHours(); // 0 - 23
        var m = date.getMinutes(); // 0 - 59
        var s = date.getSeconds(); // 0 - 59
        var session = "AM";
        if (h == 0) {
            h = 12;
        }
        if (h > 12) {
            h = h - 12;
            session = "PM";
        }
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;
        var time = h + ":" + m + ":" + s + " " + session;
        document.getElementById("MyClockDisplay").innerText = time;
        document.getElementById("MyClockDisplay").textContent = time;
        setTimeout(showTime, 1000);
    }
    showTime();

<div id="MyClockDisplay"></div>

Make a live clock in 00:00 format

2 Answers2