Fed up hunting down that elusive clock script, the one with just your requirements and nothing else?
Simply select the options you require for your site and this 'Clock Script Generator' will build the script you need.
Static or Dynamic time, any Time Zone, Daylight Saving, 12 / 24 hour also with or without any date combination.
And display in Title bar, Status bar (IE) or on the Web page.

Script :
[Help]
[?]
Destination
Display Type
Code Size
Language
  • English - Italian - French
  • Spanish - German - Dutch
  • Polish - Welsh
Source :
[?]
Date/Time Source
Time Zone
Daylight Saving :
[?]
Use
Daylight Saving Presets
Daylight Saving Starts
Daylight Saving Ends
Date :
[?]
Day (d)
Date (D)

Leading Zero
Month (M)

Leading Zero
Year (Y)
Time :
[?]
Hour Type

Leading Zero
AM/PM
 
 
Display :
[?]
On Page

Page Prefix HTML

Page Suffix HTML
Status Bar

Status
Prefix Text

Status Suffix Text
Title Bar

Title
Prefix Text

Title Suffix Text
Display Order
d
D
M
Y
h
m
s
= Day Name
= Date
= Month
= Year
= Hours
= Minutes
= Seconds

Help!

[SCRIPT OPTIONS]

top

Destination

  • Within HTML
    HTML <tags> and comments will be added to the output box so that the script can be inserted directly into the flow of an HTML document.
  • In .js File
    No <tags>, only comments.  Code to run the clock is included in the script assuming you call the script using
    <script language="JavaScript" src="path/clock.js"></script>
    exactly where you want the clock in the flow of your HTML.

Display Type

  • Static
    Clock is displayed when the page loads and is not updated.
  • Dynamic
    Clock is displayed when the page loads and is updated every second.

Size

  • Small/Compact
    This option uses small function and variable names and strips most of the unnecessary carriage returns etc from the code.
  • Large/Verbose
    This option uses long function and variable names and spaces out the code to make it easier to read.  This option is for those who wish to learn about clock scripts or those who are adding a clock script to a site that uses other JavaScripts and are having variable/function name conflicts.

Language

Select your output language of choice from those currently available:
  • English
  • French
  • Italian
  • Dutch

[SOURCE OPTIONS]

top

Date/Time Source

  • System
    the current time on the computer displaying the page.
  • Page Last Modified
    the time/date when the page being displayed was last modified.
  • UTC Time
    this is GMT without any daylight saving.  Every PC (if the time is correctly configured) has the same UTC time
  • Specific Time Zone
    Set your own time zone and the clock will display the time in your country/area. (offsets from UTC time)

Time Zone

Select your time zone offset from GMT (from -12 hours to +13 hours).  This option only active when source set to Time Zone.

[DAYLIGHT SAVING OPTIONS]

top

Use

Tick this box to use daylight saving in your clock script.

Daylight Saving Presets

This select box contains some presets for daylight saving.  More presets will follow or you can e-mail me the settings for your country and I will add them.

Daylight Saving Starts

The start of the rule based daylight saving. 
Select the day and time for the clock to move forward 1 hour.

Daylight Saving Ends

The end of the rule based daylight saving. 
Select the day and time for the clock to move back 1 hour.

[DATE OPTIONS]

top

Day Format

  • Long
    Sunday, Monday, Tuesday, ..., Saturday
  • Short
    Sun, Mon, Tue, ..., Sat

Date Format

  • Normal
    1st, 2nd, 3rd, ..., 31st
  • Short
    1, 2, 3, ..., 31
    When short is selected you have the option of adding a leading zero to numbers less than 10

Month Format

  • Long
    January, February, March, ..., December
  • Short
    Jan, Feb, Mar, ..., Dec
  • Numeric
    1, 2, 3, ..., 12
    When numeric is selected you have the option of adding a leading zero to numbers less than 10

Year Format

  • 2 digit
    05
  • 4 digit
    2005

[TIME OPTIONS]

top

Hour Type

  • 12 hour
    Sets hours to 12 hour display also outputs the am/pm symbols at the end of the time part of the display.  You can choose to add a leading zero to the 12 hour display by ticking the leading zero box.
  • 24 hour
    Sets hours to 24 hour display and automatically selects the hour leading zero. Does not display the am/pm symbols.

AM/PM Symbols

  • am
    Symbol to describe hours after midnight and before midday (12 hour display only)
  • pm
    Symbol to describe hours after midday and before midnight (12 hour display only)

[DISPLAY OPTIONS]

top

Display On Page

Tick the box to have your clock displayed on your page within the run of HTML
Prefix Page HTML
Use this box to enter any HTML you wish to appear before the clock

Suffix Page HTML
Use this box to enter any HTML code you wish to appear after your clock

Status Bar

Tick the box to have your clock displayed on the status bar of the browser window
Status Prefix Text
Use this box to enter any text you wish to appear before the clock

Status Suffix Text
Use this box to enter any text code you wish to appear after your clock

Title Bar

Tick the box to have your clock displayed on the status bar of the browser window
(IE4+ & NS6+ only)
Title Prefix Text
Use this box to enter any text you wish to appear before the clock

Title Suffix Text
Use this box to enter any text code you wish to appear after your clock

Display Order

Use the display order box to alter the date display.  You can alter the separators or the order in which the date is displayed. You may use any characters you like as separators and may include any text you like as long as you do not use any of the letters below (used for display order).
  • d
    Day of the week (e.g. Monday or Mon)
  • D
    Date (e.g. 22nd or 22)
  • M
    Month (e.g. January or Jan or 01)
  • Y
    Year (e.g. 2005 or 05)
  • h
    Hours
  • m
    Minutes
  • s
    Seconds
e.g.:
dDMY would display Monday22ndJanuary2005
to space things out a little use spaces:
d D M Y would display Monday 22nd January 2005
or you could use other seperators:
M/D/Y :: h:m:s  would display 01/22/2005 :: 10:15:03
top

 

Home | Web Tools | JavaScripts | Cascading Style Sheets [CSS] Guide | Site Map