带有动画的 Javascript 随机六位数字

本篇文章介绍一个使用 Javascript 实现的带有动画效果的随机生成六位数字的小工具。该工具可以用于生成随机密码、验证码等场景。

实现思路

为了实现动画效果，我们可以使用 setInterval() 函数来实现定时操作。每隔一定时间，我们更新页面上的数字，从而实现数字变换效果。

具体实现思路如下：

1. 定义 HTML 结构：一个包含六个数字的 div 容器和一个“生成”按钮。
2. 当用户点击“生成”按钮时，触发一个事件处理函数。
3. 在事件处理函数中，使用 setInterval() 函数来定时更新页面上的数字。
4. 在每个更新的时刻，生成一个随机数字，并更新对应的 div 的内容。

代码实现

// 记录当前数字
let currentNumber = "000000";

// 获取 HTML 元素
const container = document.querySelector("#container");
const button = document.querySelector("#generate-button");

// 定义动画速度（毫秒）
const animationSpeed = 50;

// 定义更新函数
function updateNumber() {
  // 生成新的六位数字
  const randomNumber = Math.floor(Math.random() * 1000000).toString().padStart(6, "0");
  
  // 更新数字
  for (let i = 0; i < 6; i++) {
    if (randomNumber.charAt(i) !== currentNumber.charAt(i)) {
      container.children[i].classList.add("highlight");
    }
    container.children[i].textContent = randomNumber.charAt(i);
  }
  
  // 更新当前数字
  currentNumber = randomNumber;
  
  // 动画结束时，清除高亮样式
  setTimeout(() => {
    for (let i = 0; i < 6; i++) {
      container.children[i].classList.remove("highlight");
    }
  }, animationSpeed);
}

// 定义事件处理函数
function handleGenerateEvent() {
  // 清除之前的定时器
  clearInterval(timer);
  
  // 开始新的定时器
  timer = setInterval(updateNumber, animationSpeed);
}

// 绑定点击事件
button.addEventListener("click", handleGenerateEvent);

效果预览

点击 这里 查看效果。