Led Time Panel Demo

Live Demos

See the plugin in action with different configurations:

Digital Clock

{
            id: "clock-demo",
            type: "time",
            format: "hh:mm:ss",
            color: "#8029b9",
            size: 9,
            bgcolor: "#fff",
            rounded: 0
        }

Countdown Timer

{
            id: "countdown-demo",
            type: "countdown",
            timer: "2026:0:0:0:0:0",
            format: "ddd:hh:mm:ss",
            color: "#FF0D35",
            size: 5,
            rounded: 6
        }

Random Number

{
            id: "random-demo",
            type: "random",
            num: "0,999999",
            length: 8,
            color: "#FFFF00",
            size: 8,
            font: "font2"
        }

Configuration Options

Customize the display with these parameters:

Parameter	Description	Default	Possible Values
`id`	Container element ID	"ledtime"	Any valid HTML element ID
`type`	Display type	"time"	"time", "countdown", "random"
`format`	Time/number format	"hh:mm:ss"	"hh:mm:ss", "ddd:hh:mm:ss", "mm:ss", custom combinations
`color`	LED segment color	"#fff"	Any valid CSS color
`bgcolor`	Background color	"#000"	Any valid CSS color
`size`	Segment size in pixels	16	Positive integers
`rounded`	Segment corner rounding	4	0-10 (pixels)
`font`	Digit font style	"font3"	"font1", "font2", "font3"
`timer`	Target date for countdown (required for countdown type)	N/A	"YYYY:MM:DD:HH:MM:SS"
`num`	Range for random numbers	"0,9999999"	"min,max" or single number

Quick Start

Add the Led Time Panel to your page in just a few steps:

Include the plugin script:
```
<script src="time_led.min.js"></script>
```
Add a container element:
```
<div id="led-display"></div>
```

Initialize with JavaScript:

const config = {
    id: "led-display",
    type: "time",
    color: "#FF0000",
    size: 14
};
new Led(config);