Digital Numbers JS Demo

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
Static text display: 1234567890
Temperature: 20.5°C
Humidity: 50%
<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
<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 Style Display:

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

Compatibility