Digital Numbers JS Demo

• Automatically converts numbers to LCD digital style.
• The transformed numbers are implemented purely with div, not characters, and do not support drag selection.
• Supports both static and dynamic content.

How to Use

1. Set the class="digital-numbers-js" for elements that need number conversion.
2. Load the following JS file at the end of the document:

<script src="digital-numbers.js"></script>

Effects

Static Text

• All numbers in child elements will be converted.
• Supports mixed arrangement of numbers and non-numbers.

<div class="digital-numbers-js">Static text display: 1234567890</div>
<div class="digital-numbers-js">
    <div>Temperature: 20.5°C</div>
    <div>Humidity: 50%</div>
</div>

Dynamic Text

• Set data-dn-dynamic="true" to monitor dynamic content.
• The content change of child elements will also trigger the conversion.

<script src="digital-numbers.js"></script>

<div class="digital-numbers-js">静态文本展示：1234567890</div>
<div class="digital-numbers-js">
    <div>温度：20.5°C</div>
    <div>湿度：50%</div>
</div>

<div class="digital-numbers-js" data-dn-dynamic="true">
    <div id="clock" style="display: flex; align-items: center;"></div>
</div>
<script>
    function formatNumber(num) {
        return `${num}`.padStart(2, '0');
    }
    setInterval(() => {
        let now = new Date();
        document.getElementById("clock").innerHTML =
            `${formatNumber(now.getHours())}<h2>:</h2>${formatNumber(now.getMinutes())}<h2>:</h2>${formatNumber(now.getSeconds())}`;
    }, 1000);
</script>

Custom Styles

• Custom attributes can be used on elements to adjust styles as follows:
• data-dn-width for number width, in px (default: 15)
• data-dn-height for number height, in px (default: 27)
• data-dn-thickness for the thickness of number lines, in px (default: 3)
• data-dn-gap for the gap between adjacent lines, in px (default: about 0.7)
• data-dn-color-lit for the color of lit LCD bars (default: #32CD32)
• data-dn-color-unlit for the color of unlit LCD bars (default: #FFFFFF)
• When data-dn-dynamic="true" is set, attribute changes will trigger style updates.

<div id="customized" class="digital-numbers-js p-3 bg-light text-dark" data-dn-dynamic="true">
    ...
</div>

Compatibility

• Browser compatibility requirements: MutationObserver (required for dynamic content monitoring).