How to make html clock that doesn't display military time

Question

I am working on a live html and javascript clock. This code is almost complete, but I do not want the clock to display military time,

Here's what I've tried:

<!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('time').innerHTML =
    h + ":" + m + ":" + s + `<strong>a.m.</strong>`;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

function unMilitary() {
if (h = 13) {h = 1}
if (h = 14) {h = 2}
if (h = 15) {h = 3}
if (h = 16) {h = 4}
if (h = 17) {h = 5}
if (h = 18) {h = 6}
if (h = 19) {h = 7}
if (h = 20) {h = 8}
if (h = 21) {h = 9}
if (h = 22) {h = 10}
if (h = 23) {h = 11}
if (h = 24) {h = 12}
return h;
}
</script>
</head>

<body onload="startTime()">

<div id="time"></div>
<p>
(for those of you who are viewing this time in midday, it is displaying military time.)
</p>

</body>
</html>

The unMilitary function isn't working, any suggestions? Here is the code live in jsfiddle.

Here are some options you may be interested in https://stackoverflow.com/questions/10556879/changing-the-1-24-hour-to-1-12-hour-for-the-gethours-method — IronMan, Aug 02 '19 at 20:14
@j08691 that was something I was going to fix later on please ignore that. — moose, Aug 02 '19 at 20:22

score 0 · Answer 1 · answered Aug 02 '19 at 20:15

if (h = 13) {h = 1}

You are using the = operator in the condition h = 13, so the condition of the if statement assigns 13 to h. This is not what you want; use h == 13.

A simpler solution, however, would be:

if (h > 12) {
    return h - 12;
} else if (h == 0) { // you probably forgot about this case
    return 12;
} else {
    return h;
}

Miroslav Saracevic · Answer 2 · 2019-08-02T20:24:10.667

There is easier way to deal with this, using native javascript and toLocaleString function and then splitting the result. Also you can use setInterval instead of setTimeout which you have to call multiple times

function getTimeCurrentTime() {
  let time = new Date();
  // toLocaleString in us format outputs 8/2/2019, 10:14:54 PM
  // we can then split that by comma and space and take last part of it
  return time.toLocaleString('en-US').split(', ')[1];
}

function updateCurrentTime() {
  let timeNode = document.getElementById('time');
  timeNode.innerHTML = getTimeCurrentTime();
}

setInterval(updateCurrentTime, 1000);

<div id="time"></div>

score 0 · Accepted Answer · edited May 26 '21 at 21:15

to avoid military time make if statement if hour more than 12 subtract 12 from hour

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();

    if(h >12) {
        h = h - 12;
        document.getElementById('ampm').innerHTML = "A.M";
    }
    document.getElementById('ampm').innerHTML = "P.M";

    document.getElementById('time').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="time" style="display: inline-block;"></div> <a id='ampm'></a>
<p>
for those of you who are viewing this time in midday, it is displaying 
military 
time. 
</p>

</body>
</html>

How to make html clock that doesn't display military time

3 Answers3