Skip to content

Instantly share code, notes, and snippets.

@mpflaga

mpflaga/timezone_clocks.html

Created December 21, 2023 17:23
Show Gist options
  • Save mpflaga/c3d162dd26ed01ca2318b5fbbad0fd50 to your computer and use it in GitHub Desktop.
Save mpflaga/c3d162dd26ed01ca2318b5fbbad0fd50 to your computer and use it in GitHub Desktop.
Download ZIP
A quick web page displaying numerous time zones. It is meant to be a simple and easily editable list of zones for quick viewing.
Raw
timezone_clocks.html
<!DOCTYPE html>
<html>
<head>
<title>World Clocks</title>
<style>
body {
font-family: Arial, sans-serif;
}
.clock {
display: inline-block;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
.clock h1 {
font-size: 24px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.clock p1 {
font-size: 16px;
font-family:courier, courier new, serif;
margin-top: 0;
margin-bottom: 0;
}
.clock p {
font-family:courier, courier new, serif;
font-size: 18px;
margin: 0;
}
</style>
</head>
<body>
<div id="clocks"></div>
<script>
var regions =
[
{ city:"LA", tz:"America/Los_Angeles" },
// { city:"Denver", tz:"America/Denver" },
// { city:"Chicago", tz:"America/Chicago" },
{ city:"Detroit", tz:"America/Detroit", bold: 12 },
{ city:"UTC", tz:"UTC", bold: 24 },
{ city:"London", tz:"Europe/London" },
// { city:"Spain", tz:"Europe/Madrid" },
{ city:"Europe", tz:"Europe/Rome" },
{ city:"Israel", tz:"Asia/Jerusalem" },
{ city:"Chennai", tz:"Asia/Kolkata" },
{ city:"Malaysia", tz:"Asia/Kuala_Lumpur" },
{ city:"Sydney", tz:"Australia/Sydney" }
];
function updateTime() {
var now = new Date();
for (var region = 0; region < regions.length; ++region) {
document.getElementById(regions[region].city).innerHTML = now.toLocaleString(
"en-US", {
timeZone: regions[region].tz,
hour: '2-digit',
minute: "2-digit",
hour12: true
}
);
document.getElementById(regions[region].city + "24").innerHTML = now.toLocaleString(
"en-US", {
timeZone: regions[region].tz,
hour: '2-digit',
minute: "2-digit",
second: "2-digit",
hour12: false
}
);
document.getElementById(regions[region].city + "Date").innerHTML = now.toLocaleString(
"en-US", {
timeZone: regions[region].tz,
day: 'numeric',
weekday: 'short'
}
);
}
}
function displayClocks() {
var msg ="";
for (var region = 0; region < regions.length; ++region) {
msg = msg +
"<div class=\"clock\"><h1>" + regions[region].city + "</h1>" +
"<center><p1 id=\"" + regions[region].city + "Date\"></p1><center>" +
(regions[region].bold == 12 ? "<b>" : "") +
"<p id=\"" + regions[region].city + "\"></p>" +
(regions[region].bold == 12 ? "</b>" : "") +
(regions[region].bold == 24 ? "<b>" : '') +
"<p id=\"" + regions[region].city + "24\"></p>" +
(regions[region].bold == 24 ? "</b>" : '') +
"</div>";
}
return msg;
}
document.getElementById("clocks").innerHTML = displayClocks();
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment