JavaScript

Clocks

in a variety of time formats

Metric (or Decimalized) Time

Universal Metric Time

Local Metric Time

No JS

No JS

The day is divided into 100 parts (centidays), plus decimal fraction. Think of it as a percent of the day.

The "Universal Metric Time" is based on the International Date Line. Much more information at my Guide to Metric (or Decimilized) Time.

Hexadecimal Time

No JS

The day is divided up into 65536 parts and written in hexadecimal (base-16) notation (A=10, B=11 ... F=15). This gives us a four digit clock with only slightly less accuracy than a six digit clock using the standard time format. The first digit is 1/16 of a day which equals 1.5 hours (0x8000 would be noon). The next is 1/256 of a day and equals 5.625 minutes (0x8800 is halfway between 0x8000 and 0x9000). The third is 1/4096 of a day, just over 21 seconds. Lastly we have 1/65536 of a day which is about 1.3 seconds. The "0x" at the begining is just to signify that it is in hexadecimal notation, we could just leave it off or use some other signifier.

Much more information about this can be found at Intuitor Hexadecimal Headquarters.

Octal Time

No JS

Octal Time uses a base-8 system (digits 0-7). The day is divided into 32768 parts for a total of 5 octal digits. The right-most digit updates about every 2.6 seconds (half the speed of hexidecimal time). The subscript 8 is just there to differentiate it from a decimal number.

Base64 Time

No JS

Base-64 uses ASCII characters (in ascending order: A-Z, a-z, 0-1, +, and /). Excellent for sending time via email.

Binary Time

               
               

Like hexadecimal time, the day is divided into 65536 parts, only we display it as a binary number using squares for bits, here using dark squares to represent 1 and white for 0. (If the clock stays all white or all black, then the code doesn't yet work with your browser or your browser doesn't have javascript turned on.)

There are a number of different ways we could arrange these bit squares: we could have the lowest bit on the left or right side, top or bottom; we could curve the bits in a "c" fashion or alternate them up and down in a wave; or we could break them into groupings. The arrangement shown here starts on the bottom right side and moves left, with even numbered bits on the bottom and odd numbered on top:

FDB97531
ECA86420

This can be viewed as a variation of hexadecimal time by dividing it into four 2x2 blocks of squares, each block corresponds to a digit of hexadecimal time. A value of zero in hexadecimal time would be a block of four white squares, a value of "F" (15) would be four dark squares. Here are all the combinations:

  
  
0
  
  
1
  
  
2
  
  
3
  
  
4
  
  
5
  
  
6
  
  
7
  
  
8
  
  
9
  
  
A
  
  
B
  
  
C
  
  
D
  
  
E
  
  
F

(WMZCalock uses a different arrangement, I will probably change it to be like the one shown here when I get around to it.)

Mayan Time

N
O
J
S

The Mayans used a vigesimal (or base-20) numeral system. Mayan numerals are elegant and efficient, using only combinations of dots (ones) and bars (fives) to form numerals for 1 through 19, and a stylized shell glyph for zero.

The Mayan clock shown wasn't actually used by them, but it might have been had they invented digital clocks. The day is divided into 160000 parts for a four-digit clock that updates every 0.54 seconds. The top digit updates every 72 minutes, roughly corresponding to an hour.

The clock on the left uses an embedded font I created. It works with the newest version of IE and Firefox. If it doesn't work with your browser, you can download and install the font. Unfortunately Mayan numerals are not part of Unicode yet, so I've placed them in the alphabetic range A-T, which is why you are seeing letters (and the occasional naughty word) if font embedding isn't working.

The clock on the right uses your default serif font and builds the glyphs by combining mid-dots and em-dashes. The zero is a plain old Arabic 0 instead of a shell (best I could do, sorry). It may or may not look good depending on the font your browser uses or if it uses css line-height, but it should at least give you an idea of how it should look.

(Homework: Make a clock that counts down until December 21, 2012.)

 
N
 
 

 
O
 
 

 
J
 
 

 
S