Thursday, October 3, 2013

A Script to Display Date & Time Using JavaScript

You can use it for your webpage/blog, too!

Just a few hours ago, I was thinking to add a plain 'date and time' widget to this blog. After a bit of searching, I finally found a site with the exact script. But unfortunately, it didn't really meet my standard.


As you can see, there's no comma after the name of the day, and it doesn't really look that good in my eyes. My own preference would be the one displayed on the right side of this very blog. Yup, that one.

Moreover, if you check the script, you'll notice that it requires two separate files; one for the .js file and one for the HTML to load the .js file.

Seeing that blogger doesn't provide file hosting (except for photos and videos), and it's way too complicated to host the .js file outside of Blogger server (and I'm a lazy ass to begin with), so I thought, "Ah, what the hell..." and decided to slightly alter the script, so that it can work on Blogger's HTML/JavaScript widget just fine. Besides, it's a short script anyway. So, why not?

tl;dr - Here's the altered script. But before that, click the 'read more' below first, will ya?

Okay, good. Now, feast yourself on this!

<script type='text/javascript'>

function date_time(id)
{
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
        d = date.getDate();
        ds = new Array('Remilia and her maid can go suck a nearby baton for all I care', '1st', '2nd', '3rd', '4th', '5th', '6th', '7th', '8th', '9th', '10th', '11th', '12th', '13th', '14th', '15th', '16th', '17th', '18th', '19th', '20th', '21st', '22nd', '23rd', '24th', '25th', '26th', '27th', '28th', '29th', '30th', '31st');
        day = date.getDay();
        days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
        result = ''+days[day]+', '+months[month]+' '+ds[d]+' '+year+' <br> '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}

</script>

<span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>

Now, there are few things that I want to mention concerning this altered script. If you're here just to copy this script, then feel free to ignore the rest of this post and just close this page. If you have any questions, feel free to leave a comment below.

But before that, let me clarify first that I'm in no way a decent programmer. Well, I fluently wrote ActionScript six years ago, but that's another story.

That being said, let's do this.

1. Adding a comma after the name of the day.

This was simple enough. All I had to do was adding a comma in the middle of "+days[day]+' '+months[month]+". Nothing too complicated, thankfully.

2. Converting the value 1-31 to ordinal number (1st, 2nd, 3rd).

Now, this was quite tricky. I had searched for a decent tutorial to do this, and... nothing worked. Once again, I thought to myself, "Ah, what the hell," and immediately determined to do it with my own way. And boy, did it somehow work.

As I said earlier, this was tricky (for me, at least). It involved this thing called array; a special variable that can be used to hold multiple values at a time. So logically, I added the array and wrote the code like this:

d = date.getDate();
ds = new Array('1st', '2nd', '3rd', '4th', '...);

and changed the code from '+months[month]+' '+d+' to '+months[month]+' '+ds[d]+'

But it didn't work.

I almost lost all hope, until I realized that arrays are counted not from one, but from zero instead. With this new knowledge, I changed the code once again:

ds = new Array('0', '1st', '2nd', '3rd', '4th', '...);

That '0' is pretty much just a placeholder. But upon seeing that I could exploit this, I let out an evil smirk and decided to have my fun by doing this:

ds = new Array('Remilia and her maid can go
suck a nearby baton for all I care', '1st', '2nd', '3rd', '4th', '...);

No offense, k? You loli, bratty vampire. =D

3. Adding a line break to separate the date and the clock.

And this was where shits started to rain down on both me and my ass. I swear, this must be Remilia's doing.

Long story short; I was desperately searching for tutorials on how to add a line break into a string/variable. Some said that I need to add "%0D%0A" or "\n". It didn't work. I tried to create two different functions; didn't work either.

"So what the fuck do I do?!" I yelled angrily. Good thing I was alone when I did this.

Then it turned out that I could just simply use html "<br>".

I was really careful not to break anything at the time.

--------------------------------------------------

Alright, I had enough with JavaScript right now. Back to Fruity Loops, I guess.

1 comment:

  1. I have recently started a site, the information you provide on this site has helped me greatly. Thank you for all of your time & work.
    website design

    ReplyDelete