About
Explore
Events & Classes
Support Us
Join
Sign In
JUSTCodaborate
View Project Page
Run
Fullscreen
Digital Clock with Pure JS
HTML
CSS
JS
<!-- From: https://www.codesdope.com/blog/article/how-to-create-a-digital-clock-using-javascript --> <div id="clock"></div>
@import url('https://fonts.googleapis.com/css?family=Orbitron'); body { background-color: #121212; } #clock { font-family: 'Orbitron', sans-serif; color: #905cff; font-size: 100px; text-align: center; padding-top: 40px; padding-bottom: 40px; }
function currentTime() { var date = new Date(); /* creating object of Date class */ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */ var t = setTimeout(function(){ currentTime() }, 1000); /* setting timer */ } function updateTime(k) { if (k < 10) { return "0" + k; } else { return k; } } currentTime(); /* calling currentTime() function to initiate the process */