How to create a basic fancy clock

I will show you how to make a basic fancy clock.
You need to have some skills in javascript, HTML and css, to be able to modified the script.

Let’s start with the basic javascript code:

<script language="JavaScript">
window.onload = function() { // Name of the function
Today = new Date();
Hours = Today.getHours();
Min = Today.getMinutes();
Sec = Today.getSeconds();
MessageHours =  Hours + "h " + Min + "m " +  Sec + "s"; // How hours will be displayed
Clock.innerHTML = MessageHours; // Id to call the hours in your page
Day = Today.getDate();
Month = (Today.getMonth())+1;
Year = Today.getFullYear();
MessageDate = Day + "/" + Month + "/" + Year; // How date will be displayed
TDate.innerHTML = MessageDate; // Id to call the date in your page
}
</script>

Basic css styles for your clock

<style type="text/css">
.clockcontainer {background-color:#00002B; text-align: center; max-width:160px; max-height:250px; padding: 1px 8px 8px 8px; color:#fff;}  
</style>

Basic html

<div class="clockcontainer">
    <p id="TDate"></p>
    <img src="http://yoursitehere.com/youimageurlhere.gif" />
    <p id="Clock"></p>
</div>

Another possibility with the same script:
Make a file clock.js and put all the javascript codes inside.
After call it on your page like this:

<script language="JavaScript" src="clock.js"></script>

<style type="text/css">
.clockcontainer {background-color:#00002B; text-align: center; max-width:160px; max-height:250px; padding: 1px 8px 8px 8px; color:#fff;}  
</style>

<div class="clockcontainer">
    <p id="TDate"></p>
    <img src="http://yoursitehere.com/youimageurlhere.gif" />
    <p id="Clock"></p>
</div>

Or an another version 🙂

<script language="JavaScript" type="text/javascript">
window.onload = function() {
Today = new Date();
Hours = Today.getHours();
Min = Today.getMinutes();
Sec = Today.getSeconds();
Day = Today.getDate();
Month = (Today.getMonth())+1;
Year = Today.getFullYear();
MessageHours =  Hours + "h " + Min + "m " +  Sec + "s";
Clock.innerHTML = MessageHours;
Theimage = '<img src="http://yoursitehere.com/youimageurlhere.gif" />';
Timg.innerHTML = Theimage;
MessageDate = Day + "/" + Month + "/" + Year;
TDate.innerHTML = MessageDate;
};
</script>

<style type="text/css">
#clockcontainer {background-color:#00002B; text-align: center; max-width:160px; max-height:250px; padding: 1px 8px 8px 8px; color:#fff;} 
</style>

<div id="clockcontainer"><p id="TDate"></p><p id="Timg"></p><p id="Clock"></p></div>

Result: