Timepiece Widgets

intro
clocks
dates
custom
notes
MiniFonts Timepiece Widgets is a utility for adding clocks and calendar dates to your Web pages. All you have to do is choose the clock type and style of numerals and the program writes the HTML markup, CSS file and JavaScript for you. You can then simply copy and paste the HTML and external links into your own page.
        The clocks use 'film-strip' animation techniques, as explained here, that require just one file containing all the numeral images in a vertical strip plus a second image of a static ":" separator. The JavaScript gets the current time or date from the computer's clock and translates it into numbers that move the appropriate part of the numeral images into view.
        Each clock has a few simple preferences that allow you to choose whether to use a 0-12 or 0-24 (twenty four hour) clock system, whether to include seconds and an option to hide redundant left side zeros. Appropriate sets of default settings are already built-into the program depending on the clock type but can be changed from the 'Options' button.
 

Quick start

Using the program is very simple. Try this...
  1. The default clock type is 'Digital Clock', leave that as it is.
  2. Choose a Clock Style from the right hand pop-up menu.
  3. Click on the 'Generate' button.
  4. Choose a location for the files and change the default name for the folder if you like.
  5. A confirmation dialog will tell you that the files have been generated successfully and give you an option to preview them.

Note. Windows always opens .html files in the default browser whereas a Mac opens them in the default HTML (or text) editor.

Your generated HTML page should display a working clock and gives instructions how to incorporate the necessary code into your own Web page.
        You can put the clock into a table cell or a CSS box. The links to the external CSS and JavaScript files should be pasted into the <head> section of your page and the <body> tag replace with the one that kickstarts the clocks when the page loads and switches it of when the page is left.
        So, that's the basics. Now for the details.

Next »