Am and pm in the Clock

Hi experts, I wish to put ampm! base on the codes below. I want to add am if its morning and pm if its noon or evening time! Any help please!

<!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, 1000);
}
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>

Open in new window

Whing Dela CruzAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sam Simon NasserIT Support ProfessionalCommented:
check this code
function print() {
  t = document.getElementById('time').value
  var [h,m] = t.split(":");
  console.log((h%12+12*(h%12==0))+":"+m, h >= 12 ? 'PM' : 'AM');
}

Open in new window

and you can call it by
<input type="time" id="time">
<button onclick="print()">Submit</button>

Open in new window


there is also this code
var inputEle = document.getElementById('timeInput');


function onTimeChange() {
  var timeSplit = inputEle.value.split(':'),
    hours,
    minutes,
    meridian;
  hours = timeSplit[0];
  minutes = timeSplit[1];
  if (hours > 12) {
    meridian = 'PM';
    hours -= 12;
  } else if (hours < 12) {
    meridian = 'AM';
    if (hours == 0) {
      hours = 12;
    }
  } else {
    meridian = 'PM';
  }
  alert(hours + ':' + minutes + ' ' + meridian);
}

Open in new window

can cab declared by
<input type="time" onchange="onTimeChange()" id="timeInput" />

Open in new window

https://stackoverflow.com/questions/39310579/get-am-pm-from-html-time-input
0
Julian HansenCommented:
Just add this to your output
    document.getElementById('txt').innerHTML = h + ":" + m + ":" + s + (h  < 12 ? ' am' : ' pm');

Open in new window

Full Listing
<!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 + (h < 12 ? ' am' : ' pm');
    var t = setTimeout(startTime, 1000);
}
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>

Open in new window

Breaking it down
The following code is a ternary expression
(h < 12 ? ' am' : ' pm')

Open in new window

It is the same as
var ampm = '';
if (h < 12) {
   ampm = ' pm';
}
else {
   ampm = ' am';
}
// append to time string here

Open in new window

Using the ternary just means you can use it in the time string.

Sidebar: consider using setInterval() instead of setTimeout. The latter is when you want to run something once after a specific time - the former is when you want to run something multiple times on a given interval.
i.e.
setInterval(startTime, 1000) outside of your strartTime function
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Vijaya KumarCommented:
Check out this one...

<!DOCTYPE html>
<html>
<head>
<script>

setInterval(() => {

    let time = new Date();
	console.log(
  time.toLocaleString('en-US', { hour: 'numeric', minute:'numeric', second:'numeric', hour12: true })
);  
    document.getElementById('txt').innerText =time.toLocaleString('en-US', { hour: 'numeric', minute:'numeric', second:'numeric', hour12: true });
}, 1000);
</script>
</head>

<body onload="startTime()">

<div id="txt"></div>

</body>
</html>

Open in new window

0
Whing Dela CruzAuthor Commented:
Thanks a lot, all of you experts, I've learned a lot from what you have posted. More power!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.