当前位置：首页 > JavaScript

js实现抽签

2026-02-01 15:55:52JavaScript

实现抽签功能的基本思路

使用JavaScript实现抽签功能可以通过随机数生成器来模拟抽签过程。核心是利用Math.random()方法生成随机数，再将其映射到具体的签文或结果上。

简单抽签实现

创建一个包含签文的数组，通过随机索引选取签文：

const lots = ['上签', '中签', '下签'];
const randomIndex = Math.floor(Math.random() * lots.length);
const result = lots[randomIndex];
console.log('抽签结果：', result);

带权重的抽签实现

如果需要不同签文有不同概率，可以使用权重数组：

const weightedLots = [
  { text: '上签', weight: 20 },
  { text: '中签', weight: 50 },
  { text: '下签', weight: 30 }
];

function weightedRandom(items) {
  const totalWeight = items.reduce((sum, item) => sum + item.weight, 0);
  let random = Math.random() * totalWeight;
  for (const item of items) {
    if (random < item.weight) return item.text;
    random -= item.weight;
  }
}

console.log('抽签结果：', weightedRandom(weightedLots));

可视化抽签动画

为增强用户体验，可以添加简单的抽签动画效果：

function drawLotAnimation(elementId, duration = 3000) {
  const element = document.getElementById(elementId);
  const startTime = Date.now();

  const animate = () => {
    const elapsed = Date.now() - startTime;
    if (elapsed < duration) {
      const randomIndex = Math.floor(Math.random() * lots.length);
      element.textContent = lots[randomIndex];
      requestAnimationFrame(animate);
    } else {
      const finalIndex = Math.floor(Math.random() * lots.length);
      element.textContent = lots[finalIndex];
    }
  };

  animate();
}

完整HTML示例

<!DOCTYPE html>
<html>
<head>
  <title>抽签系统</title>
  <style>
    #result {
      font-size: 24px;
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      min-height: 50px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="result">点击按钮开始抽签</div>
  <button onclick="drawLot()">抽签</button>

  <script>
    const lots = ['大吉', '中吉', '小吉', '末吉', '凶'];

    function drawLot() {
      const resultElement = document.getElementById('result');
      resultElement.textContent = '抽签中...';

      setTimeout(() => {
        const randomIndex = Math.floor(Math.random() * lots.length);
        resultElement.textContent = `抽签结果：${lots[randomIndex]}`;
      }, 1000);
    }
  </script>
</body>
</html>