Making a live clock in javascript

Asked 9/9, 2016 at 19:21 Answered 10/9, 2023 at 1:37

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

Phial answered 9/9, 2016 at 19:21 Comment(2)

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. – Signature 9/9, 2016 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: github.com/pejalo/top-of-second-ticker – Disorient 20/7, 2023 at 15:22

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://mcmap.net/q/460125/-making-a-live-clock-in-javascript

Subsequence answered 9/9, 2016 at 19:23 Comment(2)

Thank you! Didn't even think about that. Should have understood that. Anyways thank you! – Phial 9/9, 2016 at 19:33

@williamganrot : glad to help you – Subsequence 9/9, 2016 at 19:34

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

Kaduna answered 17/1, 2020 at 19:13 Comment(0)

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

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

Warsle answered 18/4, 2021 at 14:38 Comment(0)

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.

Gev answered 18/4, 2021 at 10:52 Comment(2)

It would be nice if you could explain in your answer what your code solves, instead of just posting some code... – Cherrylchersonese 18/4, 2021 at 13:50

I have updated my answer with explanation, @Cherrylchersonese ,thank you, it was my first time answering, would not repeat again. – Gev 18/4, 2021 at 14:57

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>

Sarette answered 7/4, 2018 at 14:35 Comment(1)

The question states if you could give me some tips without saying the answer straight out – Expressage 7/4, 2021 at 7:42

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>

Pickpocket answered 18/6, 2020 at 3:33 Comment(1)

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. – Allopath 11/12, 2022 at 15:11

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>

Protective answered 9/7, 2021 at 5:18 Comment(2)

Above code will display clock in digital format – Protective 9/7, 2021 at 5:22

Please try to give proper explanation of the answer. – Erroneous 9/7, 2021 at 17:42

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

Disconnect answered 7/4, 2022 at 1:37 Comment(1)

This is the only correct answer on this page that accounts for drift. Thank you! – Parachute 24/2, 2023 at 4:28

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.

Greenwood answered 7/4, 2021 at 7:39 Comment(0)

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

Gatewood answered 26/12, 2021 at 4:17 Comment(0)

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

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

Strepitous answered 17/2, 2023 at 14:47 Comment(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);

Reamer answered 9/9, 2016 at 19:27 Comment(2)

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – Winfield 9/9, 2016 at 19:46

@MikeMcCaughan, I've updated my answer, hope this will help. – Reamer 9/9, 2016 at 20:14

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>

Achromatin answered 23/2, 2017 at 17:2 Comment(0)

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

Cuomo answered 5/12, 2018 at 17:21 Comment(0)

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>

Mildamilde answered 26/11, 2021 at 4:45 Comment(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].

Hardiman answered 7/7, 2022 at 18:53 Comment(0)

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

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>

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>

Arteaga answered 10/9, 2023 at 1:37 Comment(0)

-1

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

Sadick answered 9/9, 2016 at 19:29 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags