Here, With this article you will learn how to create Digital Clock with standard format.
watch function is defined and we created a variable called date. and using the get method of javascript we store the data in h,m,s variable.
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59The complete JavaScript code is given below : watch.js file
function watch(){
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("watch").innerText = time;
document.getElementById("watch").textContent = time;
setTimeout(watch, 1000);
}
watch(); //calling functionIn the index.html file we called the function using the onload event.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="clock">
<h1>Welcome to Utshuk Watch</h1>
<div id="watch" class="watch" onload="watch()"></div>
</div>
<script src="watch.js"></script>
</body>
</html>Now the time is to styling your watch, in order to make good style we used simple css code.
body {
background:coral;
}
h1{
text-align: center;
margin-top: 150px;
}
.watch{
border: springgreen 2px solid;
}
.watch {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: whitesmoke;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
}
