Date and time

How can I have the current date displaying on my website? What about countdown or count-up timers?

Chapter 1: Date
Chapter 2: Countdown timer or count-up timer

Chapter 1: Date

Here’s an example:

   

Of course you can rearrange and style them as you wish. To style the text use tags as described in the free sample of my WPFAQ.org E-Book, Basic HTML Codes knowledge base.

Each of the parameters of the date has its own code. Combine and rearrange the order of the code as you wish.

Code displaying the name of the current day in the week:

<script type="text/javascript">

var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";

document.write("Today is " + weekday[d.getDay()]);

</script>

If you don't want the Today is part to display just replace

document.write("Today is " + weekday[d.getDay()]);

with

document.write(weekday[d.getDay()]);

If English is not your language just replace the name of the days with the name of the days in your language. If you want you can use this code to have an image or image-link displaying instead of the day's name so every Wednesday the same image would display. Just replace the name of the days with the appropriate HTML code. Don't know what the code to add links, images or image-links is? Download the free sample of my WPFAQ.org E-Book and consult the Basic HTML Codes knowledge base. Just make sure to use single quotes (') instead of quotes (") in the code you add.

Code displaying the name of the current month:

<script type="text/javascript">

var m=new Date();
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";

document.write(month[m.getMonth()]);

</script>

If English is not your language just replace the name of the months with the name of the months in your language. If you want you can use this code to have an image or image-link displaying instead of the month's name so every February the same image would display. Just replace the name of the months with the appropriate HTML code. Don't know what the code to add links, images or image-links is? Download the free sample of my WPFAQ.org E-Book and consult the Basic HTML Codes knowledge base. Just make sure to use single quotes (') instead of quotes (") in the code you add.

Code displaying the current date (1-31):

<script type="text/javascript">
var d1 = new Date();
document.write(d1.getDate());
</script>

Code displaying the current year:

<script type="text/javascript">

var y=new Date();
document.write(y.getFullYear());

</script>

Once you're done with editing the code paste it into WordPress post or page. That's it.

Chapter 3: Countdown time and count-up timer

To do this you can use a script which was originally written by Robert Hashemian. This is what it looks like:

until 2050.

Download countdown.js and upload it to the root of your server (What is the root?)

Copy the following code and edit it as described further on:

<script language="JavaScript">
TargetDate = "12/31/2049 23:59";
BackColor = "transparent";
ForeColor = "black";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds ";
FinishMessage = "Timer done...";
</script>
<script language="JavaScript" src="/countdown.js">

12/31/2049 23:59 defines the target date (start date when using count-up) in month/day/year hour/minutes format
ForeColor = "black"; defines the color of the text. Change black to white or whatever. Of course you can also use color codes or designations like #333333
CountStepper = -1; defines whether you want to use it as a countdown or a count-up timer. Change -1 to +1 for count-up.
In the DisplayFormat line you can change the language of Days, Hours, ... or you can remove the hours, minutes or seconds if you don't want them to display by removing the appropriate part.
FinishMessage = "Timer done..."; instead of Timer done... you can type anything you'd like to appear when the timer is done. You can also use basic HTML to display a link or an image.

Once you're done with editing the code paste it into your post or page. That's it.

This FAQ is also discussed in my WPFAQ.org E-Book (sample)

© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com
Thank you for visiting and supporting my website,
- Cédric -

Now share it…

Share

Comments are closed.