Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

Can I change my Web page based on time of day?

Dave, I need your help. I'm updating my Web site for The David Lawrence Show and would like to display 'ON THE AIR' between 7p and 10p PT (3a to 6a GMT) Monday through Saturday, and 'OFF THE AIR' the rest of the time. How do I do this? Later, I can easily replace this displayed text with an image tag once I find an on-air light graphic that doesn't look like it's from 1943. :-)

Dave's Answer:

This is a classic situation where you could use a number of different paths to attain the same goal, ranging from a CGI solution to a small server-side include, to a PHP script or, the solution I'll demonstrate here, a JavaScript client-side snippet.

Each has its strengths and weaknesses, and for JavaScript the risk is that some percentage of your viewers will probably have JavaScript disabled in their browsers. Assuming you can live with only about 95% of your visitors knowing if you're on the air at that moment, this should work reasonably well, and it's really easy to add without making any changes on the server.

There's one other potential hiccup in that since JavaScript is client-side, and since it's working with time, there's no way for the script to know if the visitor has their computer clock set wrong. Ah well. Let's assume that's not a big crisis either, shall we?

The first part of this script simply grabs the current time of day then extracts the Universal Time Coordinated (UTC, this used to be called Greenwich Mean Time and then Zulu Time) values for day of week and hour of day. Three simple lines:

var thedate   = new Date();
var dayofweek = thedate.getUTCDay();
var hourofday = thedate.getUTCHours();

I'll also create a simple function that lets you add conditional HTML content anywhere on the page by simply testing if (onAir()):

function onAir()
{
   // return TRUE if it's Mon through Sat, 3a-6a UTC

   if (dayofweek != 0 && 
      ((hourofday > 2 && hourofday < 7))) {
     return true;
   }
   return false;
}

To show how this works, here's an entire HTML page that includes this JavaScript and an example of how to use this new function elsewhere in the page:

<head>
<script type="text/javascript">

var thedate   = new Date();
var dayofweek = thedate.getUTCDay();
var hourofday = thedate.getUTCHours();

function onAir()
{
   // return TRUE if it's Mon through Sat, 3a-6a UTC

   if (dayofweek != 0 && 
      ((hourofday > 2 && hourofday < 7))) {
     return true;
   }
   return false;
}

</script>
</head><body>

<h1>The David Lawrence Show!</h1>

<script type="text/javascript">
if (onAir()) {
  document.write("<h2>ON THE AIR</h2>");
} else {
  document.write("<h2>OFF THE AIR</h2>");
}
</script>

<p>
If you want to learn more about David's show, 
please visit
<a href="http://thedavidlawrenceshow.com/">The 
David Lawrence Show</a>
</p>
</body>
</html>

I'll leave the rest of it in your capable hands, David, and encourage everyone else to pop over to your sites and learn about both of your great radio programs The David Lawrence Show and Online Tonight.

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Categorized: CGI Scripts and Web Site Programming (Article 3893)
Tagged:
Previous: How do the costs of publishing a book break down?
Next: How do I create custom email filters in MSN Hotmail?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

Dave, how could one accomplish this using PHP?

Posted by: Kevin Walter at February 20, 2005 1:30 AM

The PHP version is pretty similar. It makes use of PHP's <a href="http://www.php.net/manual/en/function.date.php">date</a> command.

First, here's the onAir() function in PHP:
<?php
//place this somewhere in your web page before the "On the air" section below
function onAir() {
     //PHP's time() function adds the time zone, so adjust for that
     //(see comments at bottom of http://www.php.net/manual/en/function.time.php )
     $gmtime=time() - date('Z');
     //if today is Sunday, return false
     if(date('w',$gmtime)==0) {
          return FALSE;
     }
     $hour=date('H',$gmtime);
     if($hour> 2 AND $hour< 7) {
          return TRUE;
     }
     return FALSE;
}
?>

Now, you just use the function above to decide whether to display "On Air" or "Off the Air."

<?php
if (onAir()) {
?>
<h2>ON THE AIR</h2>
<?php
} else {
?>
<h2>OFF THE AIR</h2>
<?php
}
?>

Posted by: Derek Scruggs at February 20, 2005 4:50 PM

Try ZOPE.
It has based functions that allow you to tell time...

Posted by: Ben Jolitz at March 13, 2005 10:58 PM

I need a script based on the Sabbath times- friday sundown to sat sundown, that will forward to a certian page I specify to say temp closed due to sabbath.

Here are the times for sundown in my area.

7 Oct 6:27
12 Oct 6:17
14 Oct 6:14
17 Oct 6:09
21 Oct 6:02
24 Oct 5:57
28 Oct 5:51
4 Nov 4:41
11 Nov 4:32
18 Nov 4:25
25 Nov 4:19
2 Dec 4:16
9 Dec 4:14
16 Dec 4:15
23 Dec 4:18
30 Dec 4:22
6 Jan 4:29
13 Jan 4:37
20 Jan 4:46
27 Jan 4:56
3 Feb 5:06
10 Feb 5:16
17 Feb 5:26

24 Feb 5:36
3 Mar 5:45
10 Mar 5:54
17 Mar 6:04
24 Mar 6:13
31 Mar 6:22
7 Apr 7:30
12 Apr 7:37
14 Apr 7:39
18 Apr 7:44
21 Apr 7:48
28 Apr 7:57
5 May 8:05
12 May 8:14
19 May 8:22
26 May 8:29
1 Jun 8:35
2 Jun 8:36
9 Jun 8:41
16 Jun 8:45
23 Jun 8:46
30 Jun 8:47
7 Jul 8:45
14 Jul 8:41
21 Jul 8:35
28 Jul 8:28
4 Aug 8:20
11 Aug 8:10
18 Aug 7:59
25 Aug 7:47
1 Sep 7:34
8 Sep 7:21
15 Sep 7:08
22 Sep 6:55

Posted by: Thomas Strand at February 21, 2006 4:09 PM

Perfect! Thanks this HTML example does exactly what I needed!
Erny

Posted by: Vertaalbureau at April 19, 2007 1:04 AM

Hello great script, but how do i make it show a particular graphic instead of saying 'on air' eg, I want to add a graphic on a web page that changes as per certain times of the day to a different graphic in the same position and will change back once the time changes..

Paul

Posted by: Paul at December 14, 2007 3:44 AM

Hi Dave,

I need a script to show the DJ who's on air now. This should take the server time, so that people who listen on air in other countries will see the same DJ that I see here.
I.e. from 6 am - 10 am the breakfast show. from 10 - 2 the next show...goes on like that for the whole week. and repeats again next week
My pages is in html.

Posted by: Anne at June 27, 2008 12:22 AM

Hi Dave,

Is there any simple way to be able to specify to half hour intervals?

I tried adding
var minuteofday = thedate.getUTCMinutes();
to the top and calling it out with
((hourofday > 0 && hourofday 0 && minuteofday < 30))

but it not working and I am not very fluent with javascript. Any help would be appreciated.

Also what to change the day of week to to get it to be the same every day.

Posted by: Mike at August 27, 2008 2:25 PM

Please i need an HTML-based javascript for interchanging few texts on my web-page.
My new website is used for evangelical purposes, hence i update the summary of the day's sermon on the home-page.
I'm tired of changing it manually, can a jscript help? Thanks

Posted by: ChungLee! at November 29, 2008 8:19 AM

How to change html contents and get it executed by the web server?

Posted by: savitha at February 25, 2009 4:24 AM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!