Menu
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;
}
722
Start Control Panel, and then under Clock, Language, and Region, click Change date, time or number formats. On the Formats tab, under Date and time formats, do one of the following: To change to 24-hour format, on the Short time drop-down list, select HH:mm and on the Long time drop-down list, select HH:mm:ss.
The 12-hour clock runs from 1am to noon and then from 1pm to midnight. The 24-hour clock runs from 00:00 (midnight) to 23:59.
Change Taskbar Time to 12 or 24 hour Clock Format in Control Panel. 1 Open the Control Panel (icons view), and click/tap on the Region icon. Select either the h:mm tt (default) or hh:mm tt format to use a 12-hour clock. Select either the H:mm or HH:mm format to use a 24-hour clock.
Why dont you just use a library like Moment.js to do this for you.
http://momentjs.com/docs/
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
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
