class="digital-numbers-js"
for elements that need number conversion.<script src="digital-numbers.js"></script>
<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>
data-dn-dynamic="true"
to monitor dynamic content.class="digital-numbers-js"
。<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>
data-dn-dynamic="true"
监听动态内容。<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>
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)data-dn-dynamic="true"
is set, attribute changes will trigger style updates.data-dn-width
数字宽度,单位:px(默认:15)data-dn-height
数字高度,单位:px(默认:27)data-dn-thickness
数字线条粗细,单位:px(默认:3)data-dn-gap
相邻线条间隙,单位:px(默认:约 0.7)data-dn-color-lit
液晶亮条颜色(默认:#32CD32)data-dn-color-unlit
液晶暗条颜色(默认:#FFFFFF)data-dn-dynamic="true"
时,属性变化会触发样式更新。Custom Style Display:
自定义样式展示:
<div id="customized" class="digital-numbers-js p-3 bg-light text-dark" data-dn-dynamic="true">
...
</div>