In previous post, we discussed how we can get current system Date and Time using Javascript. In this post we will create a simple Digital Clock in Javascript. The Clock will render browser’s Date and Time. We will use Google fonts and CSS to create our Javascript Clock. So let’s begin
We will be using javascript’s new Date() function to get Date and Time and further display it in form of Hours, Minutes, Seconds, AM & PM, Date, Month, Year to constitute our Digital clock.
script:
<script>
var myVar = setInterval(myTimer, 1000);
var hours = ["12",
"01","02","03","04","05","06","07","08","09","10","11","12",
"01","02","03","04","05","06","07","08","09","10","11"];
var months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
function myTimer() {
var date = new Date();
document.getElementById("date").innerHTML =
date.getDate() +
"-" +
months[date.getMonth()] +
"-" +
date.getFullYear();
document.getElementById("hours").innerHTML = hours[date.getHours()];
document.getElementById("minutes").innerHTML = date.getMinutes()<10?"0"+date.getMinutes() :date.getMinutes();
document.getElementById("seconds").innerHTML = date.getSeconds()<10?"0"+date.getSeconds() :date.getSeconds();
document.getElementById("ampm").innerHTML = date.getHours()<12?"AM":"PM";
if (document.getElementById("colon1").innerHTML.includes(":"))
{
document.getElementById("colon2").innerHTML = "";
document.getElementById("colon1").innerHTML = "";
}
else
{
document.getElementById("colon2").innerHTML = ":";
document.getElementById("colon1").innerHTML = ":";
}
}
</script>
Here we are first creating a JS Timer with 1000 milliseconds (1 second) interval. This timer will update the view every passing second ( by calling the myTimer() func). Then we are using an Array with all the months name. We are calling this to get the current month name. Then in myTimer we are updating our view.
Below is the full javascipt and HTML file to create Digital watch:
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Acme&display=swap"
rel="stylesheet"
/>
<style>
body {
overflow: hidden;
font-family: 'Acme',Arial;
background-color: #f5f5f5 !important;
height: 100vh !important;
}
.main {
height: 100vh !important;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 20px;
}
.main div {
border-radius: 0px !important;
background: #fff;
width: 90%;
max-width: 450px;
height: auto;
position: relative;
border: 1px white solid;
box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);
text-align: center;
font-size: 50px;
}
.clockpart
{
padding:0px !important;
min-width:60px !important;
display: inline-block;
}
.clockmin
{
padding:0px !important;
width:5px !important;
min-width:5px !important;
display: inline-block;
}
</style>
</head>
<body>
<div class="main">
<div class="clockContainer">
<p id="date"></p>
<p id="time"></p>
<span id="hours" class="clockpart"></span>
<span id="colon1" class="clockmin"></span>
<span id="minutes" class="clockpart"></span>
<span id="colon2" class="clockmin"> </span>
<span id="seconds" class="clockpart"></span>
<span id="ampm" class="clockpart"></span>
</div>
</div>
<script>
var myVar = setInterval(myTimer, 1000);
var hours = ["12",
"01","02","03","04","05","06","07","08","09","10","11","12",
"01","02","03","04","05","06","07","08","09","10","11"];
var months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
function myTimer() {
var date = new Date();
document.getElementById("date").innerHTML =
date.getDate() +
"-" +
months[date.getMonth()] +
"-" +
date.getFullYear();
document.getElementById("hours").innerHTML = hours[date.getHours()];
document.getElementById("minutes").innerHTML = date.getMinutes()<10?"0"+date.getMinutes() :date.getMinutes();
document.getElementById("seconds").innerHTML = date.getSeconds()<10?"0"+date.getSeconds() :date.getSeconds();
document.getElementById("ampm").innerHTML = date.getHours()<12?"AM":"PM";
if (document.getElementById("colon1").innerHTML.includes(":"))
{
document.getElementById("colon2").innerHTML = "";
document.getElementById("colon1").innerHTML = "";
}
else
{
document.getElementById("colon2").innerHTML = ":";
document.getElementById("colon1").innerHTML = ":";
}
}
</script>
</body>
</html>
OUTPUT
For more designs please visit:
More on Javascript:
How to get current Date and Time in Javascript