Example
by SpeedoThreeSixty
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible">
<meta name="author" content="Dean Alan Summer">
<meta name="description" content="">
<title>Example</title>
</head>
<body>
<p id="timer">0:00:00.000 AM (Year 0000)</p>
</body>
</html>
CSS
*, *::before, *::after {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
background: #333;
color: darkgray;
}
JavaScript
const timer = document.getElementById("timer")
function setClock12() {
const currentDate = new Date()
let milliseconds = currentDate.getMilliseconds()
milliseconds = milliseconds < 100 ? milliseconds < 10 ? "00" + milliseconds : "0" + milliseconds : milliseconds
let seconds = currentDate.getSeconds()
seconds = seconds < 10 ? "0" + seconds : seconds
let minutes = currentDate.getMinutes()
minutes = minutes < 10 ? "0" + minutes : minutes
let hours = currentDate.getHours()
let period
if (hours > 12) { hours -= 12; period = "pm" } else if (hours === 12) { period = "pm" } else { period = "am" }
const year = currentDate.getFullYear()
timer.innerText = `${hours}:${minutes}:${seconds}.${milliseconds} ${period.toUpperCase()} (Year ${year})`
}
function setClock24() {
const currentDate = new Date()
let milliseconds = currentDate.getMilliseconds()
milliseconds = milliseconds < 100 ? milliseconds < 10 ? "00" + milliseconds : "0" + milliseconds : milliseconds
let seconds = currentDate.getSeconds()
seconds = seconds < 10 ? "0" + seconds : seconds
let minutes = currentDate.getMinutes()
minutes = minutes < 10 ? "0" + minutes : minutes
let hours = currentDate.getHours()
const year = currentDate.getFullYear()
timer.innerText = `${hours}:${minutes}:${seconds}.${milliseconds} (Year ${year})`
}
const preferredFormat = prompt("What is your preferred format?\n\n(type \"12-hour\" or \"24-hour\")")
/*
What is your preferred format?
(type "12-hour" or "24-hour")
______________________________
*/
if (preferredFormat != null) {
if (preferredFormat.toString().toLowerCase() === "12-hour") {
setInterval(setClock12, 1)
setClock12()
} else if (preferredFormat.toString().toLowerCase() === "24-hour") {
setInterval(setClock24, 1)
setClock24()
} else {
setInterval(setClock12, 1)
setClock12()
}
} else {
setInterval(setClock12, 1)
setClock12()
}