Skip to content

Instantly share code, notes, and snippets.

@KokoseiJ

KokoseiJ/clock.html

Created March 29, 2025 03:07
Show Gist options
  • Save KokoseiJ/55dc25feca0ff4c3ee5984506434de65 to your computer and use it in GitHub Desktop.
Save KokoseiJ/55dc25feca0ff4c3ee5984506434de65 to your computer and use it in GitHub Desktop.
Download ZIP
Simple JS clock
Raw
clock.html
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
body {margin: 0; padding: 0;}
* * {margin: 0; padding: 0;}
p#text {
margin: 10px;
color: #ffd700;
font-size: 72pt;
font-family: "Space Mono", monospace;
font-weight: 400;
font-style: italic;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
</style>
</head>
<body>
<p id="text"></p>
<script>
let targetElem = document.getElementById("text");
const sleep = (duration) => new Promise(r => setTimeout(r, duration))
async function refreshTime() {
let currentTime = new Date();
targetElem.innerHTML = currentTime.toLocaleTimeString({}, {
hour12: false
});
await sleep(1000 - currentTime.getMilliseconds()).then(refreshTime);
}
refreshTime();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment