iWeb FAQ - Date and time

iWebFAQ.org

 

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

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 

Share/Bookmark

Share/Bookmark


Here's an example:


,


Current time:


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



Chapter 1: Date

Chapter 2: Time

Chapter 3: Countdown timer or count-up timer



Chapter 1: Date


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 iWebFAQ.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 iWebFAQ.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>




Chapter 2: Time


Only works in HTML Snippets.


Code to display the current time:


<html>

<head>

<style type="text/css">

.textfield {

border:solid 0px #ffffff;

background:transparent;

color:#000000;

</style>

<script type="text/javascript">

var timer = null


function start(){

    var time = new Date()

    var hours = time.getHours()

    var minutes = time.getMinutes()

    minutes=((minutes < 10) ? "0" : "") + minutes

    var seconds = time.getSeconds()

    seconds=((seconds < 10) ? "0" : "") + seconds

    var clock = hours + ":" + minutes + ":" + seconds

    document.forms[0].display.value = clock

    timer = setTimeout("start()",1000)

}

</script>

</head>

<body onload="start()">

<form>

<input type="text" class="textfield" name="display" size="10">

</form>

</body>

</html>




Chapter 3: Countdown timer or count-up timer


Using iWeb you find a Countdown timer under Insert, Widget, Countdown which also lets you choose between different styles.


If you want to have only text displaying 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 it 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.


Here's an example of a count-up timer:


since I was born.




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


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -