HTML Code For Clock. Display In Blog, Webpage Or Practice.

Here I would like to give you a HTML code through which you can display a clock any
ware in the browser. This is a small HTML code to display digital clock into your
blog, web page, or site. If you are new to HTML and started learning HTML than it is 
good for you to practice a clock in HTML. You can even check(see) this html clock code
running in the Microsoft Front Page.
Below is the HTML code for Digital Clock, just copy and past it into your Blog, Webpage,
or change the codes for your learning and fun.

<html>
<body id="documentBody" onload="run_clock()" >
<span id="display_here" ></span>
<script>
<!--
//Specify clock back ground color
var backgroundColor="threedface";

//Specify clock color
var clockColor="#ff0000";

//Specify clock font size
var fontSize="20px";

////NO NEED TO EDIT BELOW THIS LINE///
var docBody =document.getElementById("documentBody");
var displayHere=document.getElementById("display_here");

docBody.style.backgroundColor=backgroundColor;
docBody.style.color=clockColor;
docBody.style.fontSize=fontSize;

function run_clock()
{
    var Now=new Date();
    var hours=Now.getHours();
    var minutes=Now.getMinutes();
    var seconds=Now.getSeconds();
    var am_pm="PM";
    if (hours<12)
        am_pm="AM";
    if (hours>12)
        hours=hours-12;
    if (hours==0)
        hours=12;
    if (minutes<=9)
        minutes="0"+minutes;
    if (seconds<=9)
        seconds="0"+seconds;
    document.getElementById("display_here").innerHTML=hours+":"+minutes+":"+seconds+" "+am_pm;
    setTimeout("run_clock()",1000);
}
//-->
</script>

<style type= "text/css">
<!--
BODY {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;
width:100%;height:100%;overflow:hidden;}
}
-->
</style>
</body>
</html>

You change the font size of the digits in the digital clock, to do this you
can change the value of "20px" in the above code in the line
//Specify clock font size
var fontSize="20px"; for ex.:- "5px",or "10px",or "25px" etc.

Also you can change the colour of the Digital Clock in HTML code, to do this you
can change the value of "#ff0000" in the above code in the line
//Specify clock color
var clockColor="#ff0000";

For Ex.:- Change "#ff0000" (This Hex Code will display you Red Colour)
For Green Change to "#00FF00"
For Blue Change to "#0000FF"
For Yellow Change to "#FFFF00"

Ok Freaks play with the above code of clock in HTML, and give your comment below.
Keep visiting SearchFreak for new freaks...... . . .  .  .  .  .  .    .    .    .

No comments:

Post a Comment

For any Discussions, Questions, Ideas, Information, Inspirations, Suggestions, Please do Comment.

Google+ Badge