该攻略是使用原生 JS 实现数码表特效的完整教程。该特效是指数字从 0 变化到目标数字，即数码表翻滚特效。
<div class="counter">
<div class="digit" id="ones"></div> <!-- 个位 -->
<div class="digit" id="tens"></div> <!-- 十位 -->
<div class="digit" id="hundreds"></div> <!-- 百位 -->
</div>
.counter {
display: flex;
justify-content: center;
align-items: center;
height: 90px;
}
.digit {
width: 40px;
height: 60px;
background-color: #333;
color: #fff;
margin: 0 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
line-height: 60px;
}
const number = 356;
const digits = [...number.toString()];
const onesDigit = document.querySelector('#ones');
const tensDigit = document.querySelector('#tens');
const hundredsDigit = document.querySelector('#hundreds');
function counter(element, start, end, duration) {
let current = start;
const step = Math.floor((end - start) / duration);
const counterInterval = setInterval(() => {
current += step;
element.textContent = current;
if (current >= end) {
clearInterval(counterInterval);
element.textContent = end;
}
}, 10);
}
counter(onesDigit, 0, digits[2], 50);
counter(tensDigit, 0, digits[1], 50);
counter(hundredsDigit, 0, digits[0], 50);
下面是两个使用原生 JS 实现数码表特效的示例：
该示例是一个在线秒表，点击开始按钮后，从零开始计数，点击停止按钮后停止计数。实际上，这是在使用原生 JS 实现数码表特效。
该示例是一个简单计数器，点击按钮后，数字从 0 开始增加到目标数字。实际上，这也是在使用原生 JS 实现数码表特效。
本文链接：http://task.lmcjl.com/news/8492.html