Night & Day Detection

If we assume that people’s interests vary according to the time of day, your website might be well served by promoting different kinds of content depending on whether its day or night. For example lets say we have two articles, one about the sun eventually burning out, and one about the Hale-Bopp comet. We can make the main article be the sun in daytime, and the comet at nighttime. In this tutorial we are going to use javascript to achieve this effect.

So how can this be done with JavaScript? Basically what we need to do is make a script that will check the time and then deliver either the daytime or the nighttime HTML, so in this script we are going to learn about the Date and document objects, as well as variables, if statements, properties and methods. So lets begin.

The first part we need to make is the part that will detect the time of day using the users system clock. We are going to achieve this with the Date object, which is built right into JavaScript. The first thing we are going to do is create a new Date object and give it the name now. From this point on, the current date and time are referred to as now. Next we are going to take the current date and time (now), get the current hour from it, and insert the answer into a variable called hour. Here is how that all looks:

now = new Date(); hour = now.getHours();

Now that we have the current hour, we need to do something with it. We are going to use the current hour to display the correct content. This is accomplished with the 
document.write() function.

document.write ("Here we have the daytime content");

Everything between the double quotes in  document.write() is printed onto the page. The above example starts a new paragraph and displays some centered text. All HTML is accepted inside document.write().

We now have two pieces of knowledge: how to get the current time in hours and how to print out onto the page. But how do you combine the two? By using something called  if statements.
If statements use a very simple concept, one of the first concepts that people learn: “If this happens, then do that“. In JavaScript, if statements look like this:

if ( this is the case) { then run this code }

It looks like fractured English, but there is a method to this madness. All if statements consist of the word if followed by a statement in parentheses and a block of code in braces. The parentheses contain the condition that is being checked. The braces contain the code that will run if the condition is met.

In this script we’re checking the hour and simply applying the appropriate text to go with it. If the hour is between 4am and 6pm (hours are specified with a 24 hour clock), we’ll serve the story about the sun; if its between 6pm and 4am, we’ll server the comet story. Here is that in JavaScript:

if (hour > 4 && hour < 18)
{
document.write ("
Story about the sun");
}
else {
document.write ("
Story about the comet");
}

Lets just take a deeper look into the code above. The first line says, if the value of the variable hour is greater than 4 and less than 18, then run the code in the braces. (Note: I’m sure you remember the < (less than) and > (greater than) symbols from math class, but what the heck is &&? Well the && means and. Now what happens if it is 7pm? Since we weren’t testing for this time, the else statement applies. With else, we’re saying “If the condition isn’t true, then do this instead“. If its 7pm, then its not between 4am and 6pm, so the script runs the code following the word else.

Now we can simply combine all the code that we have here to make it look like this:

But that’s way to boring, what I want to do is make the script show different background colors and the text colors as well. If the hours are between 4 and 18 we’ll make the script change the background colors to white and the text to black, but if the hours are not between 4 and 18 then we tell the script to change the background color to black (suiting night time) and the text color to white. Now this might sound difficult, but its really just 4 more lines of code, and really short ones as well. The background color is changed by assigning a hexadecimal color to a property called document.bgColor, the text color is changed with the document.fgColor. Basically all we want to do is add those two properties into the if, else commands. In the end the script looks like this:

Hope you have enjoyed this tutorial! Good luck!