New JS Clock

Modern JavaScript/TypeScript Clock Library -- No jQuery Required

$ cat /new-js-clock/api.html

System Clock

Synchronizes with your system time and updates every second.

--:--:--

Running

High Precision

System clock with centisecond precision (10ms updates).

--:--:--:--

Running

Smooth Animation (rAF)

Uses requestAnimationFrame for smoother updates. Falls back to setTimeout when page is hidden!

--:--:--:--

Running

Countdown Timer

Counts down from 5 minutes with a callback when done. Uses the new reset() method!

05:00:00

Running

Custom Start Time

Starts at 10:30:45 and counts up. Use setTime() to change the time!

10:30:45

Running

Precision Countdown

30-second countdown with centisecond precision. Uses reset() method!

00:00:30:00

Running

12-Hour Format (AM/PM)

Feature request fulfilled! Shows time in 12-hour format with AM/PM indicator.

--:--:-- --

Running

Multiple Timezones (DST-Aware)

Show times from different timezones using IANA names. Automatically handles daylight saving time!

Local

New York

London

Tokyo

DST-aware timezones!

Multi-Instance Test

All buttons work independently! (This was the bug in the old version)

Clock A

Clock B

Both clocks independent!

Stopwatch

Counts up from 00:00:00. Uses the new stopwatch option!

00:00:00

Running

Stopwatch with Split Times

Record split times (cumulative) during your run!

00:00:00

Running

Race Lap Times

Lap times with delta vs best! Uses lapMode: 'both'

00:00:00

Lap	Lap Time	Split Time	Delta

Running

What's New in Version 1.0.0?

TypeScript + JavaScript: Written in TypeScript, works perfectly with both TS and JS
Full Type Safety: Exported interfaces and types for TypeScript users
Type Checking: Full TypeScript with strict type checking in build
Linting: ESLint with TypeScript support
No jQuery: Pure vanilla JavaScript, works in any modern browser
Bug Fix: Multiple clock instances now work correctly and independently
Modern API: Clean, Promise-free API with proper instance methods
Better Performance: Optimized timing with requestAnimationFrame option for smoother updates
Hybrid Timer: New useAnimationFrame option - uses rAF when visible, falls back to setTimeout when hidden
ES Modules: Supports both CommonJS and ES Module imports
Test Quality: 162 deterministic Jest tests with 99.74% lines, 99.01% statements, 100% functions, and 98.32% branch coverage
E2E Testing: Dockerized Selenium Grid using selenium/standalone-all-browsers on port 4444, running headless Chrome/Firefox/Edge end-to-end scenarios (including extended background-tab behavior)
Stopwatch Mode: New stopwatch mode that counts up from 00:00:00
Lap & Split Times: Record lap times (delta) and split times (cumulative)
Best/Worst Lap: Built-in helpers to find best and worst lap times

Usage Examples

JavaScript:

import { createClock } from 'new-js-clock';

// System clock
const clock = createClock(document.getElementById('clock'));

// Countdown timer
const countdown = createClock(
  document.getElementById('timer'),
  '00:05:00',
  {
    countdown: true,
    callback: () => alert('Time is up!')
  }
);

// With centiseconds
const precision = createClock(
  document.getElementById('precision'),
  undefined,
  { showCenti: true }
);

TypeScript:

import { createClock, ClockInstance, ClockOptions } from 'new-js-clock';

// System clock with types
const clock: ClockInstance = createClock(
  document.getElementById('clock')!
);

// Countdown timer with typed options
const countdownOptions: ClockOptions = {
  countdown: true,
  callback: () => alert('Time is up!')
};
const countdown: ClockInstance = createClock(
  document.getElementById('timer')!,
  '00:05:00',
  countdownOptions
);

// High precision clock
const precision: ClockInstance = createClock(
  document.getElementById('precision')!,
  undefined,
  { showCenti: true }
);

// Type-safe method calls
const time: string = clock.getTime();
const isRunning: boolean = clock.isRunning();