Page 5 of 6
The date Settings window
The main Gadget HTML is fairly simple but with the addition of two new features - some date manipulation and an auto-refresh. The first thing we need to do is to set up the Settings window:
To make the Gadget auto-update we need to make use of the main window's Timer function. This can be set to run a specified function at a set interval, repeatedly, or just once. The window onload event handler is a good place to set up the timer:
This specifies that the getTime() function should be called every 10,000 milliseconds i.e. every 10 seconds. You can adjust the refresh time to suit your particular application. Although not used in this Gadget, the setInterval function returns a code that identifies the timer that has been created. This code can be used by other functions to start, stop and change the time interval so it's worth storing in a global variable - in this case it's stored in Timer.
The getTime function does the actual work of retrieving the target date, retrieving the current date, finding the difference between the two and then displaying a reasonably formatted display of the result.
Retrieving the target date is easy:
We only want to do any work if the target has been defined by the user:
var d=new Date(Event);
Later on we are going to also need a string formatted as a simple date i.e. dd/mm/yyy and this can be constructed using the date object:
Getting the current date is just a matter of using the default date object constructor:
var Now=new Date();
To convert this to number of days we divide by 1000 to give seconds, 60 to give minutes, 60 to give hours and finally by 24 to give days:
Notice this gives a result that is in days and fractional days. If you want to convert to days and hours, say, then you would need to truncate the result to an integer and convert the fractional day into hours, minutes and seconds. Not difficult but potentially confusing. In this example we simply round the result to six significant digits:
innerHTML=target+" <br/> "+diff;
In this case the target date and the number of days to the target are separated by a line break. You could include additional HTML formatting tags such as <b> or <h1> etc. to make the text stand out.
Finally all that remains is the body of the page:
<body style="width:130; height:150">
Number of days until
You can see the pair of <div> tags with the id Display defining where the date information will appear on the page along with some additional text and formatting. It really is this simple.
As long as you have stored everything in the correct directory and given everything the correct names you should now be able to load your gadget, set a target date and watch as the countdown proceeds. Of course there is lots of scope for making the user interface look more exciting - a background picture, an icon and some colour would make an immediate impression - but this is just standard web page design.
Notice that you can use the debug window function to find out what is happening within timer interrupts but you have to be careful because the debug window will be recreated each time the event handler is called and this can be very confusing.