当前位置：首页 > JavaScript

js实现筛子

2026-03-02 06:47:47JavaScript

实现骰子的基本思路

使用JavaScript实现一个骰子功能，可以通过随机数生成骰子的点数，并结合DOM操作显示骰子的动画效果。以下是具体实现方法：

生成随机点数

使用Math.random()生成1到6的随机整数，模拟骰子的点数：

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

显示骰子点数

通过DOM操作更新页面上的骰子显示。假设HTML中有一个div元素用于显示骰子：

js实现筛子

<div id="dice"></div>

使用JavaScript动态更新骰子的显示：

const diceElement = document.getElementById('dice');

function showDice(number) {
  diceElement.textContent = number;
}

添加动画效果

为了让骰子滚动更真实，可以添加简单的动画效果。例如，在骰子停止前快速切换点数：

js实现筛子

function animateDice(callback) {
  let rolls = 0;
  const maxRolls = 10;
  const interval = setInterval(() => {
    rolls++;
    showDice(rollDice());
    if (rolls >= maxRolls) {
      clearInterval(interval);
      callback();
    }
  }, 100);
}

function rollAndShow() {
  animateDice(() => {
    const finalNumber = rollDice();
    showDice(finalNumber);
  });
}

完整示例代码

将上述代码整合为一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>骰子示例</title>
  <style>
    #dice {
      width: 100px;
      height: 100px;
      border: 2px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      margin: 20px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="dice">1</div>
  <button onclick="rollAndShow()">掷骰子</button>

  <script>
    const diceElement = document.getElementById('dice');

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

    function showDice(number) {
      diceElement.textContent = number;
    }

    function animateDice(callback) {
      let rolls = 0;
      const maxRolls = 10;
      const interval = setInterval(() => {
        rolls++;
        showDice(rollDice());
        if (rolls >= maxRolls) {
          clearInterval(interval);
          callback();
        }
      }, 100);
    }

    function rollAndShow() {
      animateDice(() => {
        const finalNumber = rollDice();
        showDice(finalNumber);
      });
    }
  </script>
</body>
</html>