请求实现Bingo抽奖动画：输出框滚动数字后显示最终结果

核心思路 #

用setInterval创建循环定时器，每隔短时间生成随机数字更新输出框，循环指定次数后清除定时器，显示最终抽选的数字。这种方式比.then()更适配需要重复执行的动画场景。

原生JS示例代码 #

假设输出框是id为resultBox的元素，最终选中的数字存在finalNumber变量中：

// 获取输出DOM元素
const resultBox = document.getElementById('resultBox');
// 替换成你已实现的随机抽取结果
const finalNumber = Math.floor(Math.random() * 99) + 1;

// 配置动画参数：滚动次数、每次间隔毫秒数
const rollCount = 25;
const intervalMs = 80;

let currentCount = 0;
// 启动滚动定时器
const rollTimer = setInterval(() => {
  // 生成随机滚动数字（范围根据你的Bingo规则调整）
  const tempNum = Math.floor(Math.random() * 99) + 1;
  resultBox.textContent = tempNum;
  
  currentCount++;
  // 达到次数后停止滚动，显示最终结果
  if (currentCount >= rollCount) {
    clearInterval(rollTimer);
    resultBox.textContent = finalNumber;
    // 给最终结果加视觉强调（可选）
    resultBox.style.cssText = 'color: #27ae60; font-size: 2rem; font-weight: bold;';
  }
}, intervalMs);

调整说明 #

• 修改rollCount可以控制滚动的总次数，数值越大动画持续越久
• intervalMs控制每次数字切换的间隔，数值越小滚动速度越快
• 若追求更丝滑的动画，可替换setInterval为requestAnimationFrame，不过前者对新手更易理解
• 最终结果的样式可以根据项目UI自由调整，比如添加缩放动画

内容的提问来源于stack exchange，提问作者Giancarlo Amodio