XTime — Clock

A multi-style clock component supporting digital / analog / traffic-light display modes, refreshing the current time every second.

Live Demo

15:47:09

2026/09/17 星期四

2026/09/17 星期四

<XTime style-type="digital" />
<XTime style-type="analog" :canvas-size="160" />
<XTime style-type="traffic" />

Props

Prop	Type	Default	Description
styleType	'digital' | 'analog' | 'traffic'	'digital'	Clock display style
canvasSize	number	200	Canvas size (px) for the analog mode
updateInterval	number	1000	Update interval (ms)
digitalColor	string	'#409eff'	Font color for the digital style
trafficColor	string	'#409eff'	Color for the traffic-light style

The Three Styles

• Digital: mimics a retro electronic clock, with a blinking colon + current date.
• Analog: hand-drawn on Canvas, with 12 ticks (3/6/9/12 bolded), hour/minute/second hands, and a red second hand on a white dial with a shadow.
• Traffic-light: a seven-segment LCD simulating an old traffic-light display; supports two digits only, with an auto-blinking colon.

Usage Notes

• updateInterval defaults to 1000ms; lowering the refresh rate reduces performance cost.
• In analog mode, too small a canvasSize causes tick overlap — keep it at 160px or above.
• Analog colors adapt automatically to the theme via CSS variables, no extra configuration needed.