Show current time using JS - Code With Bishal


Learn how to show current time with the help of JS

In this example you can learn HOW TO SHOW TIME Using With HTML, CSS and JS By Code With Bishal . Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page. If you are having any problem viewing the code just refresh the page Show current Time is a lightweight and easy-to-use JS code that creates a Clock for you. In this blog, there are five sections on the webpage, in the first section you can get the overview of the blog, in the second section there are few more coding blogs you might like,in the third section you can see the demo of the JS time made with HTML, CSS and JS, to view the fourth section click on the "View Code" button to reveal the code after that you can copy the code and paste it [that's the fifth section]

You might like this :

HOW TO CHANGE THE BACKGROUND COLOR ONCLICK USING JS
Few days ago
DIV ONLY VISIBLE ON HOVER USING HTML AND CSS
Few days ago
SIMPLE BUTTON USING HTML AND CSS
Few days ago


This is an example



HTML Code

<!DOCTYPE html>
<html>
<title>How to get current time by Code With Bishal</title>
<body>
/* by Code With Bishal - www.codewithbishal.com*/
<div class="cwb-time" id="cwb-time" onload="showtime()"></div>
</body>
</html>
Copy Contents

CSS Code

.cwb-time {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
/* add property 'background' to change the background color of the clock from white to something else */
color: #FFCC70; /*Change this to change color of the clock */
font-size: 60px; /* change this to change the font size */
font-family: Orbitron;
letter-spacing: 7px;
}

JS(Javascript) Code

function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var time = h + ":" + m + ":" + s;
document.getElementById("cwb-time").innerText = time;
document.getElementById("cwb-time").textContent = time;
setTimeout(showTime, 1000);
}
showTime();