<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<style>
.content {
max-width: 500px;
margin: auto;
}
.clock {
font-size: 24pt;
font-family: Baskerville, "Palatino Linotype", Palatino,
"Century Schoolbook L", "Times New Roman", "serif";
width: 180px;
border: thick double #ff0004;
margin: 15px;
padding: 15px;
}
</style>
</head>
<body>
<div id="content" class="content">
<div id="clock" class="clock"></div>
<div id="clock24" class="clock"></div>
<div id="AlertText1" class="clock"></div>
<div id="AlertText2" class="clock"></div>
</div>
<script>
function showAlert() {
var myText1 = "Hello world!";
document.getElementById("AlertText1").textContent = myText1;
alert(myText1);
var myText2 = "This can be whatever text you like!";
alert(myText2);
document.getElementById("AlertText2").textContent = myText2;
}
function updateTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if (minutes < 10) {
minutes = "0" + minutes; // Add leading zero for minutes
}
if (seconds < 10) {
seconds = "0" + seconds; // Add leading zero for seconds
}
var timeOfDay = hours >= 12 && hours < 24 ? "PM" : "AM"; // Determine AM or PM
if (hours > 12) {
hours = hours - 12; // Convert to 12-hour format
}
if (hours < 10) {
hours = "0" + hours; // Add leading zero for hours
}
// Format the time string
var time = hours + ":" + minutes + ":" + seconds + " " + timeOfDay;
// Update the content of the clock div
document.getElementById("clock").textContent = time;
}
function updateTime24() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
if (minutes < 10) {
minutes = "0" + minutes; // Add leading zero for minutes
}
if (seconds < 10) {
seconds = "0" + seconds; // Add leading zero for seconds
}
// var timeOfDay = (hours >= 12 && hours < 24) ? 'PM' : 'AM'; // Determine AM or PM
//if (hours > 12) {
// hours = hours - 12; // Convert to 12-hour format
// }
// Format the time string
//var time = hours + ':' + minutes + ':' + seconds + ' ' + timeOfDay;
var time = hours + ":" + minutes + ":" + seconds;
// Update the content of the clock div
document.getElementById("clock24").textContent = time;
}
// Call updateTime immediately when the page loads, and then update every second
window.onload = function () {
showAlert();
updateTime(); // Initial update
updateTime24(); // Initial update
setInterval(updateTime, 1000); // Update the time every second
setInterval(updateTime24, 1000); // Update the time every second
};
</script>
</body>
</html>
All information on this site is shared with the intention to help. Before any source code or program is ran on a production (non-development) system it is suggested you test it and fully understand what it is doing not just what it appears it is doing. I accept no responsibility for any damage you may do with this code.