HTML/CSS/JS实现点击OPEN-VAULT打印随机数至STOP停止功能求助

现有代码问题清单 #

• 按钮onclick绑定不规范：仅声明了函数名未触发执行，也没有实现定时生成随机数的逻辑
• 未定义全局定时器ID变量，无法在点击STOP按钮时终止定时任务
• 仅在页面初始化时生成1次随机数，没有循环调用逻辑
• STOP按钮未绑定点击事件，无法触发停止操作
• 生成的随机数仅输出到控制台，未写入页面的#amount_print元素展示

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <title>run game </title>
  <script>
    // 全局存储定时器ID，用于停止任务
    let randomTimer = null;

    function randomIntFromInterval(min, max) { // min and max included
      return Math.floor(Math.random() * (max - min + 1) + min)
    }

    // 启动生成随机数逻辑
    function startGenerate() {
      // 避免重复点击OPEN-VAULT产生多个定时器
      if (randomTimer) clearInterval(randomTimer);
      // 每100毫秒生成一次随机数，可自行调整间隔时间
      randomTimer = setInterval(() => {
        const rndInt = randomIntFromInterval(0, 10000);
        // 控制台打印
        console.log(rndInt);
        // 页面展示
        document.getElementById('amount_print').innerText = rndInt;
      }, 100)
    }

    // 停止生成随机数逻辑
    function stopGenerate() {
      if (randomTimer) {
        clearInterval(randomTimer);
        randomTimer = null;
      }
    }
  </script>
</head>
<body style=" color: black; margin:auto">
  <!-- table border -->
  <div class="borderline">
    <div>
      <h1>$</h1>
      <div class="amount">
        <p id="amount_print" style="font-size: 24px; font-weight: bold; color: green;"></p>
      </div>
      <button class="bail" style="height: 50px; width: 150px; background-color: green" onclick="startGenerate()">OPEN-VAULT</button>
      <button class="bail" style="height: 50px; width: 150px" onclick="stopGenerate()">STOP</button>
    </div>
  </div>
</body>
</html>

实现效果说明 #

• 点击OPEN-VAULT按钮后，每100毫秒生成一个0-10000之间的随机数，同时输出到控制台和页面绿色数字区域
• 点击STOP按钮后立即停止随机数生成
• 重复点击OPEN-VAULT不会出现多个定时器同时运行的问题

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