当前位置：首页 > JavaScript

js实现掷骰

2026-02-28 20:29:57JavaScript

实现掷骰子的基本方法

使用JavaScript的Math.random()方法生成随机数，模拟骰子的随机性。骰子通常有6个面，对应数字1到6。

function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

扩展多面骰子功能

通过参数化面数，可以模拟任意面数的骰子。例如10面骰或20面骰。

function rollDice(sides) {
  return Math.floor(Math.random() * sides) + 1;
}
// 使用示例：rollDice(20) 返回1-20的随机数

实现多次掷骰功能

添加参数控制掷骰次数，返回结果数组。适用于需要批量生成随机数的场景。

function rollMultipleDice(times, sides = 6) {
  return Array.from({ length: times }, () => rollDice(sides));
}
// 使用示例：rollMultipleDice(3) 返回3个1-6的随机数数组

添加动画效果增强交互

结合CSS和定时器实现视觉上的骰子滚动效果，提升用户体验。

function animateDiceRoll(element, finalValue) {
  let counter = 0;
  const interval = setInterval(() => {
    element.textContent = rollDice(6);
    if (++counter > 10) {
      clearInterval(interval);
      element.textContent = finalValue;
    }
  }, 100);
}

完整HTML示例

以下是一个完整的HTML实现，包含按钮交互和结果显示。

<!DOCTYPE html>
<html>
<head>
  <style>
    #diceResult {
      font-size: 48px;
      margin: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <button onclick="roll()">掷骰子</button>
  <div id="diceResult"></div>

  <script>
    function rollDice(sides = 6) {
      return Math.floor(Math.random() * sides) + 1;
    }

    function roll() {
      const resultElement = document.getElementById('diceResult');
      const finalValue = rollDice();
      animateDiceRoll(resultElement, finalValue);
    }

    function animateDiceRoll(element, finalValue) {
      let counter = 0;
      const interval = setInterval(() => {
        element.textContent = rollDice(6);
        if (++counter > 10) {
          clearInterval(interval);
          element.textContent = finalValue;
        }
      }, 100);
    }
  </script>
</body>
</html>

js实现掷骰