HTML Goodies: Script Tip: Week 26

By Joe Burns


Tip of the Hat...

Tiii-ii-eee-ime, is on my side. Yes, it is!

My apologies to the Rolling Stones. Let's start tearing this pup apart from the top down. We'll begin with the hour display.

But first you need to familiarize yourself with the clock again. Here ya go...



Here's the Code for the Clock

The clock is displaying in the traditional hour:minute:second format. But, as you may or may not know, JavaScript doesn't simply allow us to present the hours by calling for and then posting the return from the method getHours(). Quite the contrary, actually.

The getHours() method returns the hours "0" (midnight) through "23" (11 PM.). That may seem strange to you; it does to me, too. Why not return 1 through 24? Then at least you could display military time. But alas, nothing can ever be that easy. So, we have to compensate. Usually it's done by simply adding one to the return, but we want to go further. We're going to turn that 0 through 23 into the traditional 1 through 12 AM or PM display. And it's not that rough, actually.

By the way, you can read a lot more about grabbing and posting dates and time in the HTML Goodies 30-Step JavaScript Primer Series.

Here's the code we're worried about:


var RightNow = new Date()

var ampm = RightNow.getHours()
if (ampm >= 12)
{nampm = "PM"}
else
{nampm = "AM"}

var hr = RightNow.getHours()
if(hr > 12)
{nhr = hr -12}
else
{nhr = hr}

if (hr == 0)
{nhr = "12"}
else
{nhr = nhr}


We start right off by creating a variable "RightNow" that will represent the new Date(). Remember that whenever you use dates and times you need to create a variable name for the Date object. That Date object contains everything you ever need to know about the current date and time. You'll use it to extract what you want to work with. All we want right now is the hour.

To begin playing with the hour, we need to determine if it's AM or PM. We set up a variable "ampm" to represent the current hour denoted by RightNow.getHour().

Do you see how that works? We assigned the name "RightNow" to the full Date object. Then we coupled the Date object with the method "getHours()". The result is a return of the current hour represented by 0 through 23. One of those numbers will be returned.

Now that we have the hour, we're going to set up a condition. We do that with our good friend, the IF/ELSE statement. Look at this:

if (ampm >= 12)
{nampm = "PM"}
else
{nampm = "AM"}


We're taking the number returned from RightNow.getHours(), represented by "ampm," and setting a condition to it.

We're saying, "If the number is greater than or equal to 12 (ampm >= 12), then nampm (that stands for "new AM PM") is equal to the string "PM." If the number is not (else) then nampm is equal to the string "AM."

Those three lines of code create a variable "nampm" that shows whether it's AM or PM. Later we can call on that variable to display the AM or PM, depending on the time of day.

On to the next piece of code. It looks like this:

var hr = RightNow.getHours()
if(hr > 12)
{nhr = hr -12}
else
{nhr = hr}

Does it look familiar? It should. This code is doing the exact same thing as the last blurp of code. A variable, in this case "hr", is created that represents the hour number returned from RightNow.getHours().

Next we set up another conditional statement that tests that number.

We are saying that if "hr" is greater than 12, then take away 12. Get it? Let's say "hr" is 13 or one o'clock. Take away 12 and it becomes the more familiar 1. AND assign the new variable name "nhr" (that stands for "new hour") to it.

But if "hr" is less than 12, we are told to do nothing. Just make "nhr" equal to what was returned.

But what if it's 12 AM?! That means that the number that is returned is 0. It can't be zero o'clock, so we'll need to quickly change any number zero into 12. Here's the code that does that:

if (hr == 0)
{nhr = "12"}
else
{nhr = nhr}


It reads, "If "nhr" is equal to zero (note double equal signs), make "nhr" now equal to the string 12. If not, then leave "nhr" equal to "nhr"." I guess we could have set up a whole new variable name, but for that one concern, it wasn't worth it.

Now we have the variable "nhr" that is equal to the current hour, in the traditional 1 through 12 format.

Next Week: Grabbing and Altering the Minute


Learn to write your own JavaScripts with the
HTML Goodies 30-Step Primer Series
and take the knowledge home with you in
JavaScript Goodies!

You can find many other uses for JavaScript
on your Web pages here!


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date