Display 12-hour and 24-hour time
Question
I want to make a webpage that displays the current time. When the "12-hour format" button is clicked, the time in 12-hour time will display in the div area. When the "24-hour format" button is clicked, the time will show in 24-hour time in the div area. Currently nothing happens when these buttons are clicked. Help!
HTML:
<html>
<head>
<title>Clock</title>
<script type="text/javascript" src="clock.js"></script>
</head>
<body>
<div id="textbox"></div>
<br/>
<button type="radio" onclick="getTwelveHrs()">12 Hour Format</button>
<button type="radio" onclick="getTwentyFourHrs()">24 Hour Format</button>
</body>
</html>
JavaScript:
function getTwelveHours{
if (i < 10) {
i = "0" + i;
}
return i;
}
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('textbox').innerHTML = h + ":" + m + ":" + s;
t = setTimeout(function () {
startTime()
}, 500);
}
startTime();
function getTwentyFourHrs() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('textbox').innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(function() {
startTime()
}, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
6 answers
solution1
27 2014-09-25 16:50:30
Why dont you just use a library like Moment.js to do this for you.
H, HH 24 hour time
h, or hh 12 hour time (use in conjunction with a or A)
so just use this code in JavaScript when using moment.js
the moment() method returns the current date in your specific format. So when you the user clicks the button you can call the following method on each button
moment().format("YYYY-MM-DD HH:mm"); // 24H clock
moment().format("YYYY-MM-DD hh:mm"); // 12H clock
Havn't tested this , but it should work
solution2
7 2019-11-04 17:08:32
The 12 hour format can be obtained by using moment js a good library for performing time & date operations.
moment().format('YYYY-MM-DD, hh:mm:ss A')
where Post or ante meridiem (Note the only one of the character ap are also considered valid)
Link for Moment Js :-
solution3
4 2019-06-12 16:31:12
Agreed with others, yes issues with that code but for time conversion part - maybe you could do something simple like this using JavaScript built-in functions :
For 12-hr Format :
let formattedTime = new Date().toLocaleTimeString('en-US'); console.log(formattedTime)
For 24-hr Format :
let currentDateTime = new Date(); let formattedTime = currentDateTime.getHours() + ":" + currentDateTime.getMinutes() +":" + currentDateTime.getSeconds(); console.log(formattedTime)
solution4
2 2022-10-06 07:06:22
const time = new Date().getHours('en-US',{hour12:false});
const time = new Date().getHours('en-US',{hour12:true});
solution5
0 2014-09-25 17:41:16
To be perfectly honest, I'm not entirely sure how you were trying to make this happen, but I think I understand what you wanted to have happen.
Give this a try:
window.onload = function() {
var h, m, s;
document.getElementById('twelveHrs').style.display = 'none';
document.getElementById('twentyFourHrs').style.display = 'none';
getTwelveHrs();
getTwentyFourHrs();
function getTwelveHrs() {
var tag = 'AM';
checkTime();
if(h > 12) {
h -= 12
tag = 'PM';
}
document.getElementById('twelveHrs').innerHTML = h + ':' + m + ':' + s + ' ' + tag;
t = setTimeout(function() {
getTwelveHrs()
}, 1000);
}
function getTwentyFourHrs() {
checkTime();
document.getElementById('twentyFourHrs').innerHTML = h + ':' + m + ':' + s;
var t = setTimeout(function() {
getTwentyFourHrs()
}, 1000);
}
function checkTime() {
var today = new Date();
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
if(h < 10)
h = '0' + h;
if(m < 10)
m = '0' + m;
if(s < 10)
s = '0' + s;
return h, m, s;
}
}
function displayTwelveHrs() {
document.getElementById('twentyFourHrs').style.display = 'none';
document.getElementById('twelveHrs').style.display = '';
}
function displayTwentyFourHrs() {
document.getElementById('twelveHrs').style.display = 'none';
document.getElementById('twentyFourHrs').style.display = '';
}
Then replace your HTML with:
<div id="twelveHrs"></div>
<div id="twentyFourHrs"></div>
<br />
<button type="radio" onclick="displayTwelveHrs()">12 Hour Format</button>
<button type="radio" onclick="displayTwentyFourHrs()">24 Hour Format</button>
Basically, when the page loads, it'll start the clocks and hide the corresponding div tags. Then you click a button, it will then display the div you want while hiding the other.
A working JSFiddle can be found at: http://jsfiddle.net/fp3Luwzc/
solution6
-1 2019-11-04 19:57:26
Since deadline at work is coming and right now is really just around the corner, I have decided to answer this 5 years old question.
Most people recommended using Moment.js library, which is really fine, because in most cases there is no point in reinventing the wheel and trusting a library with 9,897,199 weekly npm downloads is without any doubts a sane choice.
However, since the only answer providing solution based on OP's code seems to have some bugs in it; I would like to humbly propose my solution:
const FORMATS = { TwelveHours: 12, TwentyFourHours: 24 } class Clock { format = FORMATS.TwentyFourHours; constructor(clockDivId) { this.clockDivId = clockDivId; this.clockInterval = setInterval(() => { document.getElementById(clockDivId).innerHTML = this.getCurrentTime().format(this.format); }, 500) } getCurrentTime() { let today = new Date(); return new Time(today.getHours(), today.getMinutes(), today.getSeconds()); } switchTo12HourFormat() { this.format = FORMATS.TwelveHours } switchTo24HourFormat() { this.format = FORMATS.TwentyFourHours } destroy() { clearInterval(this.clockInterval); } } class Time { constructor(hours, minutes, seconds) { this.hours = hours; this.minutes = minutes; this.seconds = seconds; } format(type) { switch (type) { case FORMATS.TwentyFourHours: { return this.print(this.hours) } case FORMATS.TwelveHours: { let tag = this.hours >= 12 ? 'pm' : 'a.m'; let hours = this.hours % 12; if (hours == 0) { hours = 12; } return this.print(hours) + ' ' + tag; } } } //private to2Digits(number) { return number < 10 ? '0' + number : '' + number; } print(hours) { return this.to2Digits(hours) + ':' + this.to2Digits(this.minutes) + ':' + this.to2Digits(this.seconds); } } let clock = new Clock("clock");
<html> <head> <title>Clock</title> </head> <body> <div id="clock"></div> <br/> <button onclick="clock.switchTo12HourFormat()">12 Hour Format</button> <button onclick="clock.switchTo24HourFormat();">24 Hour Format</button> </body> </html>
Oh no, oh forking no! I have written "print" instead of "this.print" and I've run it in Google Chrome.
Basically UI got blocked by print dialog and I've lost all the code and had to write it again and now I am going home to enjoy some sleep and maybe, maybe one episode of HIMYM.
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.