Clock gadget that show current time on web page with HTML, CSS and JavaScript

Real time Clock gadget

Get and show the current date and time on web page with HTML , CSS and JAVASCRIPT.

What you need for creating this clock gadget.

• Basic knowledge of HTML, CSS and JavaScript .
• Text editor like notepad , better if you use Standard code editor.

Some recent post.
1. A animation with html tag used for creating a line and circle
2. New edition of Animation with html and css (line, animate and and css property) - top4ways
3. Animation with html and css (line, animate and and css property) - top4ways

Lets start coding to create this Clock gadget.

Open an text editor and write the basic structure of html5 and start coding as in steps below

Step First:- This below code is HTML source code for this Clock gadget.

&lthtml&gt &ltdiv id="clock"&gt &ltdiv id="time"&gt&lt/div&gt &ltdiv id="day"&gt&lt/div&gt &lt/div&gt &lt/html&gt

Step Second :-This is css code for this Clock gadget.Write this code between &ltstyle&gt and &lt/style&gt

#clock {
height:200px;
width:400px;
position:relative;
background-color:lightgreen;
font-size:48px;
font-weight:800;
border-radius:30px;
}
#time{
height:60px;
margin-left:45px;
margin-top:30px;
background-color:orange;
width:310px;
display:inline-block;
border-radius:20px;
position:absolute;
}
#day{
height:60px;
margin-left:55px;
margin-top:120px;
background-color:orange;
width:290px;
display:inline-block;
border-radius:20px;
position:absolute;
}

Step Third: - The last and most important code(JavaScript) for this Clock gadget without this our clock is nothing. Write this code between &ltscript&gt and &lt/script&gt

(function (window, document) {
function printTime(){
var a = new Date();
var hours = a.getHours();
var mins = a.getMinutes();
var secs = a.getSeconds();
var mils = a.getMilliseconds();
var day = a.getDay();
var date = a.getDate();
var month = a.getMonth();
if (hours<10 br=""> hours ="0"+hours;
};
if (secs<10 br=""> secs ="0"+secs;
};
if (mins<10 br=""> mins ="0"+mins;
};
if (mils<10 br=""> mils ="00"+mils;
}
else if (mils<100 mils="">10){
mils ="0"+mils;
}
else {
mils = mils;{}
};
if(day==0){
day_name="SUN,"+date; };
if(day==1){
day_name="MON,"+date; }
if(day==2){

day_name="TUE,"+date; }
if(day==3){
day_name="WED,"+date;
}
if(day==4){

day_name="THU,"+date; }
if(day==5){
day_name="FRI,"+date;
}
if(day==6){
day_name="SUT,"+date;
}
if(month==0){
month_name = "JAN";
}
if(month==1){
month_name = "FEB";
}
if(month==2){

month_name = "MAR";
}
if(month==3){
month_name = "APR";
}
if(month==4){
month_name = "MAY";
}
if(month==5){
month_name = "JUN";
}
if(month==6){
month_name = "JUL";
}
if(month==7){
month_name = "AUG";
}
if(month==8){
month_name = "SEP";
}
if(month==9){
month_name = "OCT";
}
if(month==10){
month_name = "NOV";
}
if(month==11){
month_name = "DEC";
}

document.getElementById("time").innerHTML = hours+":"+mins+":"+secs+":"+mils;
document.getElementById("day").innerHTML = day_name+month_name;

}
setInterval(printTime, 1);
})(window, document);

Step Fourth:- Now combine and save this codes with .html extension and Run it on browser.