Classic Clock With code

Real time example

Go to my sololearn profile

Inspect the HTML

<!DOCTYPE html>
<html>
<head>
<title>Digital clock pro</title>
<style>
form{text-align: center;border: 2px solid black;padding: 20px;background: #aaaa;}
#time{font-size: 60px;font-weight: 600;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;letter-spacing: 2px;}
#date{font-size: 30px;padding:15px;font-weight: 300;}
#quote{color:rgb(18, 1, 255);font-style: oblique;font-size: 20px;}
</style>
<script>
window.onload = function(){
printTime();
};
function printTime() {
var d = new Date();
var hours = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var date = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
if(hours<10){hours = "0" + hours;} 
if(mins<10){mins = "0" + mins;}
if(secs<10){secs = "0" + secs;} 
if(date<10){dates = "0" + date;}
if(month<10){months = "0" + month;}

document.getElementById("time").innerHTML = hours+":"+mins+":"+secs;
document.getElementById("date").innerHTML = "Date : " + dates + "." + months + "." + year;
}
setInterval(printTime, 1000);
</script> 
</head>
<body id="body">
<form id="all">
<div id="time"></div>
<div id="date"></div>
<div id="quote"><q>Today is the best day of my Life.</q></div>
</form>
</body>
</html>

Download this HTML Source Code

Also Read

Classic Clock Using HTML-5

Facebook Login Page

Disco Light animation

Pre-Loader version-3

Kumar Lakshmanan

Simple Digital Clock

Real time example

Go to my sololearn profile

Inspect the HTML

Download this HTML Source Code

Also Read

Post a Comment

1 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Simple Digital Clock

Real time example

Go to my sololearn profile

Inspect the HTML

Download this HTML Source Code

Also Read

You may like these posts

Post a Comment

1 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget