We’ve already published similar article before about creating JavaScript Date header for blog and websites. This tutorial is especially for web developers who are just learning web developing technology. In this tutorial, I am teaching you how to set up a dynamic clock in your website or blog by using a JavaScript with image digits.
Though it is not necessary to include current local time in your website, it might be pretty attracting and mesmerizing.
Now lets begin with the tutorial.
First of all we’ll be creating images of numbers “0-9” colon “:” and “AM/PM”. You can create the separate images in any image editing software or you can download the bundle of images directly from here.
Now all the images needed for a digital clock is ready. Next, we’ll be assigning each image for each digits and colons. For instance, refer to the following example:
Now we’ve assigned images to each of the values in digital clock.
Next, we’ll be creating a function that does the main work of a digital clock.
Let’s name the new function as UpdateClock. And set the needed variables to get the digital values from clock.
This JavaScript function actually shows you the digital clock with 24 hours time format. But we’ve AM/PM image which means that we’ll be showing clock in 12 hours format. Since we’ll need only 12 hours we’ll be substracting each of the value greater than 12 from 12.
Now, if it is 13 hour it will return 13-12 = 1. This is defined in code in orange color. And rest of the codes are used for setting up clock.
And at the end of the code, we’ll be calling the function:
Again we’ll need to arrange the placement of the images. Following code will do it.
The brown colored code will place one colon image in it.
The green colored will have ones and tens minute.
The red colored will define AM/PM.
Copy the above code wherever you want inside the <body> of your webpage or blog.
Upload all the images that you’ve created or downloaded to the root directory of your webpage.
If you are having a digital clock in index.html then put the images where index.html is located.
If everything went well, you’ll have a working digital clock.
If you still have a problem, refer to following illustrations on placement of JavaScript and HTML code.
Hope this was helpful.
Though it is not necessary to include current local time in your website, it might be pretty attracting and mesmerizing.
Now lets begin with the tutorial.
First of all we’ll be creating images of numbers “0-9” colon “:” and “AM/PM”. You can create the separate images in any image editing software or you can download the bundle of images directly from here.
Now all the images needed for a digital clock is ready. Next, we’ll be assigning each image for each digits and colons. For instance, refer to the following example:
dgt1 = new Image;In above sample, we defined that dgt1 will have the new image in the first line. Now, since dgt1 carries an image with it, in second line we again defined the location of source of image that dgt1 will be holding. We’ll be doing this to all of them.
dgt1.src = “dgt1.gif”;
dgt1 = new Image;Note: “dgt1” is just a naming and variable, you can replace it anything you want. However numbering is recommended, for example, num1, digit1, symbol1, etc.
dgt1.src = “dgt1.gif”;
dgt2 = new Image;
dgt2.src = “dgt2.gif”;
dgt3 = new Image;
dgt3.src = “dgt3.gif”;
dgt4 = new Image;
dgt4.src = “dgt4.gif”;
dgt5 = new Image;
dgt5.src = “dgt5.gif”;
dgt6 = new Image;
dgt6.src = “dgt6.gif”;
dgt7 = new Image;
dgt7.src = “dgt7.gif”;
dgt8 = new Image;
dgt8.src = “dgt8.gif”;
dgt9 = new Image;
dgt9.src = “dgt9.gif”;
dgt0 = new Image;
dgt0.src = “dgt0.gif”;
dgtam = new Image;
dgtam.src = “dgtam.gif”;
dgtpm = new Image;
dgtpm.src = “dgtpm.gif”;
dgtcolon = new Image;
dgtcolon.src = “dgtcolon.gif”;
dgtblank = new Image;
dgtblank.src = “dgtblank.gif”;
Now we’ve assigned images to each of the values in digital clock.
Next, we’ll be creating a function that does the main work of a digital clock.
Let’s name the new function as UpdateClock. And set the needed variables to get the digital values from clock.
function UpdateClock(){The script part highlighted in red will determine to replace AM with PM or PM with AM. If the time hour value is greater than 12 then it will load image with PM written in it, else it will return AM image.
var time= new Date();
hours = time.getHours();
mins = time.getMinutes();
if (!document.images) return;
dgt = mins % 10;
document.images.minsones.src=eval(“dgt”+dgt+”.src”);
dgt = (mins – (mins % 10))/10;
document.images.minstens.src=eval(“dgt”+dgt+”.src”);
if (hours > 12)
document.images.ampm.src=dgtpm.src;
else
document.images.ampm.src=dgtam.src;
if (hours > 12) hours = hours – 12;
dgt = hours % 10;
document.images.hoursones.src=eval(“dgt”+dgt+”.src”);
dgt = (hours – (hours % 10))/10;
document.images.hourstens.src=eval(“dgt”+dgt+”.src”);
document.images.colon.src=dgtcolon.src;
setTimeout(“UpdateClock()”,30000);
}
This JavaScript function actually shows you the digital clock with 24 hours time format. But we’ve AM/PM image which means that we’ll be showing clock in 12 hours format. Since we’ll need only 12 hours we’ll be substracting each of the value greater than 12 from 12.
Now, if it is 13 hour it will return 13-12 = 1. This is defined in code in orange color. And rest of the codes are used for setting up clock.
And at the end of the code, we’ll be calling the function:
UpdateClock();Now we’ve created the backend of a digital clock. You’ll have to arrange all the codes above in similar format below:
<SCRIPT>The above codes goes inside the <head> tag of your html template.
if (document.images) {
dgt1 = new Image;
dgt1.src = “dgt1.gif”;
dgt2 = new Image;
dgt2.src = “dgt2.gif”;
dgt3 = new Image;
dgt3.src = “dgt3.gif”;
dgt4 = new Image;
dgt4.src = “dgt4.gif”;
dgt5 = new Image;
dgt5.src = “dgt5.gif”;
dgt6 = new Image;
dgt6.src = “dgt6.gif”;
dgt7 = new Image;
dgt7.src = “dgt7.gif”;
dgt8 = new Image;
dgt8.src = “dgt8.gif”;
dgt9 = new Image;
dgt9.src = “dgt9.gif”;
dgt0 = new Image;
dgt0.src = “dgt0.gif”;
dgtam = new Image;
dgtam.src = “dgtam.gif”;
dgtpm = new Image;
dgtpm.src = “dgtpm.gif”;
dgtcolon = new Image;
dgtcolon.src = “dgtcolon.gif”;
dgtblank = new Image;
dgtblank.src = “dgtblank.gif”;
}
function UpdateClock(){
var time= new Date();
hours = time.getHours();
mins = time.getMinutes();
if (!document.images) return;
dgt = mins % 10;
document.images.minsones.src=eval(“dgt”+dgt+”.src”);
dgt = (mins – (mins % 10))/10;
document.images.minstens.src=eval(“dgt”+dgt+”.src”);
if (hours > 12)
document.images.ampm.src=dgtpm.src;
else
document.images.ampm.src=dgtam.src;
if (hours > 12) hours = hours – 12;
dgt = hours % 10;
document.images.hoursones.src=eval(“dgt”+dgt+”.src”);
dgt = (hours – (hours % 10))/10;
document.images.hourstens.src=eval(“dgt”+dgt+”.src”);
document.images.colon.src=dgtcolon.src;
setTimeout(“UpdateClock()”,30000);
}
UpdateClock();
</SCRIPT>
Again we’ll need to arrange the placement of the images. Following code will do it.
<IMG SRC=”dgtblank.gif” border=0 name=”hourstens”>Orange colored HTML code will place two image sources for hour format in ones and tens numbers.
<IMG SRC=”dgtblank.gif” border=0 name=”hoursones”>
<IMG SRC=”dgtblank.gif” border=0 name=”hoursones”>
<IMG SRC=”dgtblank.gif” border=0 name=”minstens”>
<IMG SRC=”dgtblank.gif” border=0 name=”minsones”>
<IMG SRC=”dgtblank.gif” border=0 name=”ampm”>
The brown colored code will place one colon image in it.
The green colored will have ones and tens minute.
The red colored will define AM/PM.
Copy the above code wherever you want inside the <body> of your webpage or blog.
Upload all the images that you’ve created or downloaded to the root directory of your webpage.
If you are having a digital clock in index.html then put the images where index.html is located.
If everything went well, you’ll have a working digital clock.
If you still have a problem, refer to following illustrations on placement of JavaScript and HTML code.
Hope this was helpful.
No comments:
Post a Comment