Making a live clock in javascript

Question

The clock kinda works. But instead of replacing the current time of day it prints a new time of day every second. I understand why it does that but I don't know how to fix it. I would appreciate if you could give me some tips without saying the answer straight out. Here is my code:

function time(){
    var d = new Date();
    var s = d.getSeconds();
    var m = d.getMinutes();
    var h = d.getHours();
    document.write(h + ":" + m + ":" + s);
}

setInterval(time,1000);

Well, `document.write` does just add stuff to the document, so you will get multiple lines of output. You want to _replace_ the output instead of keep adding to it. — VLAZ, Sep 09 '16 at 19:23
For anyone coming across this in the future, if you want your updates to sync with the system clock, I made a tiny package: https://github.com/pejalo/top-of-second-ticker — pejalo, Jul 20 '23 at 15:22

score 29 · Answer 1 · edited Aug 15 '22 at 12:34

29

Add a span element and update its text content.

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

<span id="span"></span>

Answer updated [2022] https://stackoverflow.com/a/67149791/7942242

edited Aug 15 '22 at 12:34

crg

4,284
2
29
57

answered Sep 09 '16 at 19:23

Pranav C Balan

113,687
23
165
188

1

Thank you! Didn't even think about that. Should have understood that. Anyways thank you! – WilliamG Sep 09 '16 at 19:33
@williamganrot : glad to help you – Pranav C Balan Sep 09 '16 at 19:34

score 20 · Answer 2 · answered Jan 17 '20 at 19:13

You can also use toLocaleTimeString() on Date() to just get your display date instead of creating through so many variables.

window.onload = displayClock();
function displayClock(){
  var display = new Date().toLocaleTimeString();
  document.body.innerHTML = display;
  setTimeout(displayClock, 1000); 
}

crg · Answer 3 · 2023-05-30T07:56:46.993

7

Use new Date().toLocaleTimeString() within the setInterval function.

setInterval(() => console.log(new Date().toLocaleTimeString()),1000);

edited May 30 '23 at 07:56

answered Apr 18 '21 at 14:38

crg

4,284
2
29
57

Naga Sai Sriya · Answer 4 · 2021-04-18T14:19:26.137

5

Here's my answer, hope it may help.

<html>

<body>
  <script type="text/javascript" charset="utf-8">
    let a;
    let time;
    setInterval(() => {
      a = new Date();
      time = a.getHours() + ':' + a.getMinutes() + ':' + a.getSeconds();
      document.getElementById('time').innerHTML = time;
    }, 1000);
  </script>
  <span id="time"></span>
</body>

</html>

I have used the setInterval arrow function and declared the variables a, time outside so as to avoid repeated allocation, where the span id(time) runs for a specified interval(here it is 1000) and document.getElementById("time") call gets you the element by the specified ID and also it's setting the innerHTML of that element to the value of time.

edited Apr 18 '21 at 14:19

answered Apr 18 '21 at 10:52

Naga Sai Sriya

61
1
7

It would be nice if you could explain in your answer what your code solves, instead of just posting some code... – Klaassiek Apr 18 '21 at 13:50
2

I have updated my answer with explanation, @Klaassiek ,thank you, it was my first time answering, would not repeat again. – Naga Sai Sriya Apr 18 '21 at 14:57

score 3 · Answer 5 · answered Apr 07 '18 at 14:35

Please follow this link https://codepen.io/uniqname/pen/eIApt you will get your desire clock or try this code

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="txt"></div>

</body>
</html>

The question states *if you could give me some tips without saying the answer straight out* — Jan Turoň, Apr 07 '21 at 07:42

score 2 · Answer 6 · edited Jul 09 '21 at 08:52

2

Code will display clock in digital format

function myClock() {         
  setTimeout(function() {   
    const d = new Date();
    const n = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = n; 
    myClock();             
  }, 1000)
}
myClock();

<html>
    <body>
      <div id="demo"></div>
    </body>
</html>

edited Jul 09 '21 at 08:52

Benedikt Kromer

711
6
22

answered Jul 09 '21 at 05:18

w.Daya

443
1
7
12

Above code will display clock in digital format – w.Daya Jul 09 '21 at 05:22
Please try to give proper explanation of the answer. – Tyler2P Jul 09 '21 at 17:42

Diego · Answer 7 · 2020-06-19T21:00:14.937

This can be nicely done using ES6.

const clock12 = document.getElementById('clock12')
const clock24 = document.getElementById('clock24')

// Concatenate a zero to the left of every single digit time frame
function concatZero(timeFrame) {
  return timeFrame < 10 ? '0'.concat(timeFrame) : timeFrame
}

function realTime() {
  let date = new Date()
  let sec = date.getSeconds()
  let mon = date.getMinutes()
  let hr = date.getHours()
  // 12 hour time
  // If the hour equals 0 or 12, the remainder equals 0, so output 12 instead. (0 || 12 = 12)
  clock12.textContent = `${concatZero((hr % 12) || 12)} : ${concatZero(mon)} : ${concatZero(sec)} ${hr >= 12 ? 'PM' : 'AM'}`
  // 24 hour time
  clock24.textContent = `${concatZero(hr)} : ${concatZero(mon)} : ${concatZero(sec)}`
}

setInterval(realTime, 1000)

body,
html {
  height: 100%;
  display: grid;
}

div {
  margin: auto;
  font-size: 2rem;
  font-family: consolas;
}

<div>
  <p id="clock12"></p>
  <p id="clock24"></p>
</div>

Doesn't the above code get the am/pm wrong between midnight and 1am? It should display 12:xx AM, but will show 12:xx PM. — Dan Christensen, Dec 11 '22 at 15:11

Jan Turoň · Answer 8 · 2021-04-07T07:48:28.973

If this is the root of your problem

But instead of replacing the current time of day it prints a new time of day every second.

then you can't make the Date object responsive, because

JavaScript Date objects represent a single moment in time in a platform-independent format.

If you don't wish to create a new object every second, you can register a dedicated Web worker that calls performance.now() every second, but this is more demanding on system resources than simply creating the Date object, which just copies the actual system clock (thus not creating a separate process for measuring the time). tl;dr: just create a new Date object every second as you do.

The root of your document.write() issue stems from this:

Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document [in setInterval in your case] automatically calls document.open(), which will clear the document.

To update part of your page, you usually set innerHTML of some element as @Pranav suggests.

score 1 · Answer 9 · answered Dec 26 '21 at 04:17

<html>
<head>
  <script>
    function clock() {
      var clockDiv = document.querySelector("#clock");
      return setInterval(() => {
        let date = new Date();
        let tick = date.toLocaleTimeString();
        clockDiv.textContent = tick;
      }, 1000);
    }
  </script>
</head>
<body onload="clock()">
  <div id="clock"></div>
</body>
</html>

score 1 · Answer 10 · answered Apr 07 '22 at 01:37

Also keep in mind that the code isn't loaded exactly at the turn of a second plus there's a small natural drift. So if you care about the exact seconds you also need to keep it at sync.

Here's an example continuing on yusrasyed's answer from above:

window.onload = displayClock();
function displayClock(){

  const d = new Date();
  var sync = d.getMilliseconds();
  var syncedTimeout = 1000 - sync;

  var display = d.toLocaleTimeString();
  document.body.innerHTML = display;

  setTimeout(displayClock, syncedTimeout); 
}

This is the only correct answer on this page that accounts for drift. Thank you! — Matthias, Feb 24 '23 at 04:28

Bartosz Wierzbicki · Answer 11 · 2023-02-17T14:47:54.623

1

setInterval(function () {
  const time = new Date().toTimeString().slice(0, 8);
  span.textContent = time
}, 1000)

<span id="span"></span>

edited Feb 17 '23 at 14:47

answered Feb 17 '23 at 14:47

Bartosz Wierzbicki

11
2

Aniket Singh · Answer 12 · 2016-09-09T20:13:31.360

0

A working demo, follow the link

http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

Updated you are using document.write which appends the current time each time (and that's what your problem was if I am not wrong). So for replacing previous time with new time - 1. you have to open document with replace mode (as shown in code below) 2. you write the current time 3. then you close the document.

function time(){
    var d = new Date();
    var s = d.getSeconds();
    var m = d.getMinutes();
    var h = d.getHours();
    document.open("text/html", "replace");
    document.write(h + ":" + m + ":" + s);
    document.close();
}

setInterval(time,1000);

edited Sep 09 '16 at 20:13

answered Sep 09 '16 at 19:27

Aniket Singh

2,464
1
21
32

2

Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Heretic Monkey Sep 09 '16 at 19:46
1

@MikeMcCaughan, I've updated my answer, hope this will help. – Aniket Singh Sep 09 '16 at 20:14

score 0 · Answer 13 · answered Feb 23 '17 at 17:02

anyone wanting to know how to code a digital clock with alarm? Here is my codepen http://codepen.io/abhilashn/pen/ZLgXbW

function AmazeTime(almbtnobj) {
 this.date,this.day,this.dt,this.month, this.year,this.hour,this.minute,this.second = null;
 this.almHour, this.almMinute, almMeridiem = null;
 this.meridiem = "AM";
 this.almBtn = almbtnobj;
 this.almBtn = this.setAlarm;
}

AmazeTime.prototype.initializeTime = function() {
 this.dt = new Date();
 this.day = this.getDayInWords(this.dt.getDay());
 this.date = this.dt.getDate();
 this.month = this.getMonthInShort(this.dt.getMonth());
 this.year = this.dt.getFullYear();
 this.hour = this.setHour(this.dt.getHours());
 this.minute = this.doubleDigit(this.dt.getMinutes());
 this.second = this.doubleDigit(this.dt.getSeconds());
 this.meridiem = this.setMeridiem(this.dt.getHours());
}

AmazeTime.prototype.setHour = function(hr) { 
 if(hr > 12) {
  hr = hr - 12;
 }
 if(hr === 0) {
  hr = 12;
 }
 return this.doubleDigit(hr);
}

AmazeTime.prototype.doubleDigit = function(val) {
 if(val < 10) {
  val = "0" + val;
 }
 return val;
}
AmazeTime.prototype.setMeridiem = function(hr) {
 if(hr > 12) {
  hr = hr - 12;
  return "PM";
 } else {
  return "AM";
 }
}

AmazeTime.prototype.getMonthInShort = function(value) {
 switch(value) {
  case 0:
   return "Jan";
   break;
  case 1:
   return "Feb";
   break;
  case 2:
   return "Mar";
   break;
  case 3:
   return "Apr";
   break;
  case 4:
   return "May";
   break;
  case 5:
   return "Jun";
   break;
  case 6:
   return "Jul";
   break;
  case 7:
   return "Aug";
   break;
  case 8:
   return "Sep";
   break;
  case 9:
   return "Oct";
   break;
  case 10:
   return "Nov";
   break;
  case 11:
   return "Dec";
   break;  }
}

AmazeTime.prototype.getDayInWords = function(value) {
 switch(value) {
   case 0:
    return "Sunday";
    break;
   case 1:
    return "Monday";
    break;
   case 2:
    return "Tuesday";
    break;
   case 3:
    return "Wednesday";
    break;
   case 4:
    return "Thursday";
    break;
   case 5:
    return "Friday";
    break;
   case 6:
    return "Saturday";
    break;
 }   
}

AmazeTime.prototype.setClock = function() {
 var clockDiv = document.getElementById("clock");
 var dayDiv = document.getElementById("day");
 var dateDiv = document.getElementById("date");
 var self = this;
 dayDiv.innerText = this.day;
 dateDiv.innerText = this.date + " " + this.month + " " + this.year;
 clockDiv.innerHTML = "<span id='currentHr'>" + this.hour + "</span>:<span id='currentMin'>" + this.minute + "</span>:" + this.second + " <span id='meridiem'>" + this.meridiem + "</span>";
}

AmazeTime.prototype.setAlarm = function() {
 this.almHour = this.doubleDigit(document.getElementById('almHour').value);
 this.almMinute = this.doubleDigit(document.getElementById('almMin').value);
 if(document.getElementById("am").checked == true) {
  this.almMeridiem = "AM";
 } else  {
  this.almMeridiem = "PM";
 }
}
AmazeTime.prototype.checkAlarm = function() {
 var audio = new Audio('http://abhilash.site44.com/images/codepen/audio/audio.mp3');
 if(this.hour == this.almHour && this.minute == this.almMinute && this.almMeridiem == this.meridiem) {
  audio.play();
  if(this.minute > this.almMinute) {
   audio.pause();
  }
 } 
}

var mytime = null;
mytime = new AmazeTime(document.getElementById("savebtn"));
window.addEventListener('load', function() { 
 function runTime() {
 mytime.initializeTime();
 mytime.setClock();
 mytime.checkAlarm();
 }
setInterval(runTime, 1000); 
} , false); 

function saveAlarm() {  
 mytime.setAlarm();
 $('#myModal').modal('hide');
}
 
 
document.getElementById("savebtn").addEventListener("click", saveAlarm , false);

body { background:#A3ABF2; font-family:Arial; text-align:center; }
.day { font-size:64px;  }
.date { font-size:33px; }
.clock { font-size:44px; }
.clock-content { margin-top:35vh; color:#FFF;  }
.alarm-icon { font-size:34px; cursor:pointer; position:absolute; top:15px; right:15px; color:#FFF; }
.setalmlbl { padding-right:20px; }
.setalmtxtbox { margin-right:10px; width:60px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="alarmbtn" data-toggle="modal" data-target="#myModal" class="fa fa-bell alarm-icon"></i>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> Set Alarm</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
   <form>
      <div class="modal-body">
  
   <div class="form-inline">
     <label for="hours" class="setalmlbl" >Hours  </label>
     
    <select class="form-control setalmtxtbox" name="almHour" id="almHour">
    <script>
     for(var h = 1; h <= 12; h ++) {
      document.write("<option value="+ h +">" + h + "</option>");
      }
    </script>
    </select>
    
    <label for="minutes" class="setalmlbl"> Minutes  </label>
    <select class="form-control setalmtxtbox" name="almMin" id="almMin">
    <script>
     for(var m = 1; m <= 60; m++) {
      document.write("<option value="+ m +">" + m + "</option>");
      }
    </script>
    </select>
    <div class="form-check">
     <label class="form-check-label">
    <input class="form-check-input" type="radio" name="meridiem" id="am" value="am" checked>
     A.M.
     </label>
   </div> 
   <div class="form-check">
     <label class="form-check-label">
    <input class="form-check-input" type="radio" name="meridiem" id="pm" value="pm">
    P.M.
     </label>
   </div> 
    </form>
   
   
   
   </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" id="savebtn" class="btn btn-primary">Save</button>
      </div>
  
    </div>
  </div>
</div>


  
  <div class="container-fluid">
   
   <div class="clock-content">
    <div class="day" id="day"></div>
    <div class="date" id="date"></div>
    <div class="clock" id="clock"></div>
   </div>
  </div>

score 0 · Answer 14 · answered Dec 05 '18 at 17:21

you can look at this simple javascript clock here in app.js for a live clock in the browser https://github.com/danielrussellLA/simpleClock

var clock = document.getElementById('clock');

setInterval(function(){
  clock.innerHTML = getCurrentTime();
}, 1);

function getCurrentTime() {
  var currentDate = new Date();
  var hours = currentDate.getHours() > 12 ? currentDate.getHours() - 12 : currentDate.getHours();
  hours === 0 ? hours = 12 : hours = hours;
  var minutes = currentDate.getMinutes();
  var seconds = currentDate.getSeconds() < 10 ? '0' + currentDate.getSeconds() : currentDate.getSeconds();
  var currentTime = hours + ':' + minutes + ':' + seconds;
  return currentTime;
}

score 0 · Answer 15 · edited Nov 26 '21 at 06:47

Try something like this.

new Date() will give you the date for today. After getting the date get the hour, minutes, seconds from today's date.

setTimeout(startTime, 1000) will help you to run the timer continuously.

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>

mooncraft man · Answer 16 · 2022-07-07T22:47:18.387

0

A simple clock would be somthing like

setInterval(() => {
     let arr  = Date().match(/\d{2}(?=:)|(?<=:)\d{2}/g).map(x => x = Number(x))
console.log(new Object({hours: arr[0], minutes: arr[1], seconds: arr[2]}))
},1000)

Its console logs out an array that is [h, m, s].

edited Jul 07 '22 at 22:47

answered Jul 07 '22 at 18:53

mooncraft man

11
3

score -1 · Answer 17 · answered Sep 09 '16 at 19:29

What do you mean by "new time of day"? But in order to replace new time, you can create a div contain the time, and every time you call time(), set that div.innerHTML = "", like below

HTML:

<div id="curr_time"></div>

JS:

var div = document.getElementById('curr_time'); 
function time() {
  div.innerHTML = "";
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  div.innerHTML = h + ":" + m + ":" + s;
}

setInterval(time, 1000);

Making a live clock in javascript

17 Answers17

Linked

Related