This blog is about how to make a digital clock using JavaScript. The code link and preview is given at the end of the blog.
HTML Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&display=swap" rel="stylesheet">
<title>Digital Clock</title>
</head>
<body>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<script src="script.js"></script>
</body>
</html>
|
CSS Code:
body {
background: black;
}
.clock {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 80px;
font-family: 'Orbitron', sans-serif;
letter-spacing: 7px;
background: #ff0000;
background: -webkit-linear-gradient(to right, #ff0000, #9932cc);
background: linear-gradient(to right, #ff0000, #9932cc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
|
JavaScript Code:
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
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();
|
