<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: rgb(0, 0, 0);
}
h{
color: white;
}
.clock {
background-color: rgb(251, 237, 237);
border: 10px solid red;
border-radius: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: rgb(6, 174, 241);
font-size: 60px;
letter-spacing: 7px;
}
</style>
</head>
<body>
<h1><b><u><center>Digital Clock</center></u></b></h1>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
</body>
<script>
function showTime()
{
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h==0){
h=12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
var time = h +":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
</script>
</html>
No comments:
Post a Comment