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 do it 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. Thank you. 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);
16 answers
solution1
24 2016-09-09 19:23:30
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 [2021] https://stackoverflow.com/a/67149791/7942242
solution2
15 2020-01-17 19:13:58
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); }
solution3
4 2021-04-18 10:52:19
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 .
solution4
4 2021-04-18 14:38:29
只需使用new Date().toLocaleTimeString()它会给你你想要的。
setInterval(() => console.log(new Date().toLocaleTimeString()),1000);
solution5
3 2018-04-07 14:35:15
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>
solution6
2 2021-07-09 05:18:02
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>
solution7
1 2020-06-18 03:33:36
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>
solution8
1 2021-04-07 07:39:47
If this is the root of your problem
But instead of replacing time of day it prints time of day every second.时间，而是每秒打印时间。
then you can't make the Date object responsive, because
JavaScript Date objects represent 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 clock (thus not creating a separate process for measuring the time).时钟（因此不会创建一个单独的过程来测量时间）。 just create a new Date object every second as you do. 只需像您一样每秒创建一个新的 Date 对象。
The root of your document.write() issue stems fromthis :
Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will .会自动调用 document.open()，这将。
To update part of your page, you usually set innerHTML of some element as @Pranav suggests.
solution9
1 2021-12-26 04:17:22
<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>
solution10
0 2016-09-09 19:27:06
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);
solution11
0 2017-02-23 17:02:53
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">×</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> AM </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="meridiem" id="pm" value="pm"> PM </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>
solution12
0 2018-12-05 17:21:16
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;
}
solution13
0 2021-11-26 04:45:05
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>
solution14
0 2022-04-07 01:37:47
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);
}
solution15
0 2022-07-07 18:53:27
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].
solution16
-1 2016-09-09 19:29:34
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.