<!DOCTYPE html>
<html>
<head>
<title>My clock</title>
<style type="text/css">
body{
background: orange;
}
.clock{
background: rgb(255, 0, 0);
background: rgb(0, 0, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #fff;
font-size: 80px;
border: 1px solid #ccc;
padding: 0px 5px 0px 5px;
}
</style>
</head>
<body>
<div id="MyClockDisplay" class="clock"></div>
<script type="text/javascript">
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 >= 12){
h = h - 12;
session = "PM";
}
if(h == 0){
h = 12;
}
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>
</body>
</html>
