All Digits
Display digits 0-9
<lcd-digit digit="0"></lcd-digit>
Interactive Counter
Use buttons to increment/decrement
digit.increment();
digit.decrement();
Clock Display
Use colon for time displays
<!-- HTML -->
<div class="clock-display">
<lcd-digit id="h1" digit="0"></lcd-digit>
<lcd-digit id="h2" digit="0" colon colon-on></lcd-digit>
<lcd-digit id="m1" digit="0"></lcd-digit>
<lcd-digit id="m2" digit="0" colon colon-on></lcd-digit>
<lcd-digit id="s1" digit="0"></lcd-digit>
<lcd-digit id="s2" digit="0"></lcd-digit>
</div>
<script>
function updateClock() {
const now = new Date();
const h = String(now.getHours()).padStart(2, '0');
const m = String(now.getMinutes()).padStart(2, '0');
const s = String(now.getSeconds()).padStart(2, '0');
document.getElementById('h1').digit = h[0];
document.getElementById('h2').digit = h[1];
document.getElementById('m1').digit = m[0];
document.getElementById('m2').digit = m[1];
document.getElementById('s1').digit = s[0];
document.getElementById('s2').digit = s[1];
// Blink colons
const blink = now.getMilliseconds() < 500;
document.getElementById('h2').colonOn = blink;
document.getElementById('m2').colonOn = blink;
}
setInterval(updateClock, 100);
</script>
Custom Colors
Customize with CSS properties
lcd-digit {
--lcd-digit-on-color: #3b82f6;
--lcd-digit-glow-color: rgba(59, 130, 246, 0.5);
}
Special Characters
Minus sign and blank
<lcd-digit digit="-"></lcd-digit>