Hello readers, Today in this blog you’ll learn how to create a Digital Working Clock using Javascript. Earlier I have shared a Working Analog Clock using HTML CSS & Javascript, now it’s time to create a Digital Clock using Javascript.
JavaScript gets real-time from your device and displays it on the webpage. And this post is about how JavaScript gets the time and displays with some basics ways. As you can see in the image, there is a real-time digital clock, which means you can see time in number with hour, minutes, and seconds.
And the clock run normally you don’t have to refresh the webpage to see the updated time. There is just a time in numbers format and am pm indicator.
You can use it in your sites and projects after a few changes of codes according to your requirements. And I believe you can take this digital clock at the next level with your creativity. If you like this program (Digital Clock) and want to get the source codes of this program. You can easily get it from the download link which is given below.
Working Digital Clock using Javascript [Source Codes]
To create this program (Digital Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Digital Clock Javascript | kishankharb</title> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="clock">
<div class="display">
</div>
</div>
<script>
setInterval(function(){
const clock = document.querySelector(".display");
let time = new Date();
let sec = time.getSeconds();
let min = time.getMinutes();
let hr = time.getHours();
let day = 'AM';
if(hr > 12){
day = 'PM';
hr = hr - 12;
}
if(hr == 0){
hr = 12;
}
if(sec < 10){
sec = '0' + sec;
}
if(min < 10){
min = '0' + min;
}
if(hr < 10){
hr = '0' + hr;
}
clock.textContent = hr + ':' + min + ':' + sec + " " + day;
});
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body{
display: grid;
place-items: center;
background: #131419;
}
.clock{
background: #131419;
height: 120px;
line-height: 120px;
text-align: center;
padding: 0 30px;
box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
font-size: 60px;
color: cyan;
letter-spacing: 5px;
font-family: 'Orbitron', sans-serif;
}
Comments
Post a Comment