原生 JS 实现数码表特效攻略

概述

该攻略是使用原生 JS 实现数码表特效的完整教程。该特效是指数字从 0 变化到目标数字，即数码表翻滚特效。

实现步骤

首先，我们需要在 HTML 中创建一个数码表的结构，包括外层容器和数字容器。HTML 结构如下：

<div class="counter">
  <div class="digit" id="ones"></div> <!-- 个位 -->
  <div class="digit" id="tens"></div> <!-- 十位 -->
  <div class="digit" id="hundreds"></div> <!-- 百位 -->
</div>

在 CSS 中，设置外层容器的样式和数字容器的样式，并使用 flex 布局使其在容器内水平居中。

.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;
}

在 JS 中，定义数码表中的数字以及目标数字，并将其分为个位、十位和百位，以实现数字在数码表中逐个翻滚的效果。

const number = 356;
const digits = [...number.toString()];
const onesDigit = document.querySelector('#ones');
const tensDigit = document.querySelector('#tens');
const hundredsDigit = document.querySelector('#hundreds');

实现数码表中的数字变化效果。首先，我们需要定义数字的变化速度，即数字变化的时间。我们可以定义一个自定义函数，接受两个参数：起始数字和目标数字。然后在函数内部使用 setInterval 进行数字的变化。同时，我们需要在数字变化时保证数字的精确性，使用 Math.floor() 函数对数字进行取整。

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);