Time Dependent Page Contents

Have you ever had some text that you want in your page but not all the time. Perhaps you want to stagger the times of the day that visitors to your site are able to download the big archives that you have stored on your site so as to spread the data transfer load throughout the day rather than having everyone trying to download all of your offerings all at once.

It is easy to write dynamic code into your web page using the Javascript document.writeln statement. All we need to do in order to select between different code to insert into the page based on the time of day is to determine what time of day it is and process the write statements inside of appropriate if statements.

The getHours() javascript method returns the current hour of the day as a number between 0 and 23. The hour returned reflects the time as recorded on the visitor's computer which may or may not be the same as the time at your location but for the purpose of distributing downloads throughout the day, the exact time of the changeovers relative to your timezone is probably unimportant as long as the time is proportioned appropriately.

Let's take a look at some dynamic code that has been inserted into this page depending on the current time on the server hosting this site.

For the purpose of this example, I have displayed the current hour as advised by your computer in the first line of the dynamic text. This is followed by a compound if statement outputting one of three different pairs of lines depending on the time of day. The first line of each in this example tells you the time period that is tested for by the if statement. The final line either displays a link to one of the other pages on my site or tells you that you can't have a link at the moment.

Following is the actual code that I used to output the above dynamic lines:

 var now = new Date;
var timeNow = now.getHours();
var nextHour = timeNow + 1;
document.writeln('The time is between ' + timeNow + ' and '
+ nextHour + ' on the 24 hour clock<br />');
if (timeNow >=1 && timeNow < 5) {
document.writeln('The time on the server is between 1 am and 5 am<br />');
document.writeln('During this period of each day, we do not provide a link');
document.writeln('in this section of the page.');
} else { if (timeNow >= 5 && timeNow < 19) {
document.writeln('The time on the server is between 5 am and 7 pm<br />');
document.writeln('During this period of each day, we provide this link');
document.writeln('to our <a href="site.htm">site map</a>.');
} else {
document.writeln('The time on the server is between 7 pm and 1 am<br />');
document.writeln('During this period of each day, we provide this link');
document.writeln('to our <a href="index.html">home page</a>.');
}
}

Of course the code in this example is really rather pointless, but it does serve to illustrate the technique and to provide you with some code that you can use as a starting point to produce your own time dependent code in your page. If you make a modified version of this code that performs some really useful function on your web site, please let me know, I may even provide a link to your page from here.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate