JavaScript Time and Day Lesson

Parkland College > Fine & Applied Arts > Graphic Design | Web Design >
Student Links > GDS 214 > JavaScript Time and Day Lesson

GDS 214 WEB DESIGN II
JavaScript Time and Day Lesson
Instructor: Rob Higgins

Changing Stuff by Time or Day

By using a little JavaScript you can automatically display text or images by the time of the day, the day of the week, month or any variation there of.

Soup of the Day

For your project 1 restaurant web site, you might want to display the daily specials or the "soup of the day".

Here is the Script you can use to do it:

mydate = new Date();

///This is where we extract the day out of the date we have just retrieved

myday = mydate.getDay();

///Change "The soup of the Day" to whatever you want your text to be.
/// 0=Sunday, 1=Monday, 2=Tuesday etc.

if(myday == 0) document.write("The Soup of the Day is Leek and Bacon ");
else if(myday == 1) document.write("The Soup of the Day is Asparagus ");
else if(myday == 2) document.write("The Soup of the Day is Chicken Noodle ");
else if(myday == 3) document.write("The Soup of the Day is French Onion ");
else if(myday == 4) document.write("The Soup of the Day is Vegetable ");
else if(myday == 5) document.write("The Soup of the Day is Asparagus ");
else if(myday == 6) document.write("The Soup of the Day is Chicken Noodle ");

</script>

Note: On the example on this page, I added the <H2></H2> pair inside my quotes. You may format your text as you please but be careful not to use quotation marks inside of quotation marks. If you must delineate a string within your quotation marks use single quotes instead of double quotes inside your surrounding double quote marks.

Daily Images

Use the same JavaScript as above to have daily images except add image tags instead of your html. Simply delete the html between the quote marks and add your image tags <img scr='yourdailyimage.jpg'>.

Here is the code for daily images:

mydate = new Date();

///This is where we extract the day out of the date we have just retrieved

myday = mydate.getDay();

///This is the bit that you should change. 0=Sunday, 1=Monday, 2=Tuesday etc.
///Change Soup of the Day to your image tag <IMG SRC='dailyimage.jpg'>.

if(myday == 0) document.write("<IMG SRC='images/sunday.jpg'>");
else if(myday == 1) document.write("<IMG SRC='images/monday.jpg'>");
else if(myday == 2) document.write("<IMG SRC='images/tuesday.jpg'>");
else if(myday == 3) document.write("<IMG SRC='images/wednesday.jpg'>");
else if(myday == 4) document.write("<IMG SRC='images/thursday.jpg'>");
else if(myday == 5) document.write("<IMG SRC='images/friday.jpg'>");
else if(myday == 6) document.write("<IMG SRC='images/saturday.jpg'>");

</script>

Night & Day Script

Here is the Script that will give you a different message depending on whether it's night or day:

<SCRIPT LANGUAGE="JavaScript">

var now=new Date();

var hour=now.getHours();

if (hour > 4 && hour < 18) {

document.bgColor ="#FFFFFF";

document.fgColor ="#FF0000";

document.write ("<CENTER><h1>This is day</h1>");

document.write ("<P>No one wants to work");

document.write ("<P>So <font color='blue' size='7'>PARTY</font></CENTER>");

}

else {

document.bgColor ="#000000";

document.fgColor ="#0000FF";

document.write ("<CENTER><h1>This is night</h1>");

document.write ("<P>Everyone wants to PARTY</CENTER>");

}

</SCRIPT>

Note: The last script has a couple of new properties:

document.bgColor ="#000000";

document.fgColor ="#0000FF";

These change the color of the background and the text of your document.

Enjoy!

Now your pages can be automatically updated when you want them to be.

Zip Files

HTML Files

Additional Files

______________________________

Last updated: 8/26/03• Webmaster: Paul Young

Tips, Tricks
& Handouts

Student
Links