当前位置：首页 > JavaScript

抽签js实现

2026-01-31 14:34:05JavaScript

抽签功能实现

使用JavaScript实现抽签功能可以通过随机数生成和数组操作完成。以下是几种常见的抽签场景实现方法。

简单随机抽签

从固定列表中随机抽取一个选项：

抽签js实现

function drawLottery(options) {
  const randomIndex = Math.floor(Math.random() * options.length);
  return options[randomIndex];
}

const prizes = ["一等奖", "二等奖", "三等奖", "谢谢参与"];
const result = drawLottery(prizes);
console.log(result); // 随机输出一个奖项

带权重的抽签

实现不同选项有不同中奖概率的抽签：

抽签js实现

function weightedDraw(weights) {
  const total = weights.reduce((sum, weight) => sum + weight, 0);
  const random = Math.random() * total;
  let current = 0;

  for (let i = 0; i < weights.length; i++) {
    current += weights[i];
    if (random < current) return i;
  }
}

const items = ["iPhone", "AirPods", "优惠券", "谢谢参与"];
const weights = [0.01, 0.05, 0.2, 0.74]; // 对应概率
const index = weightedDraw(weights);
console.log(items[index]); // 按概率输出结果

不重复抽签

从列表中抽取多个不重复的选项：

function multiDraw(options, count) {
  const result = [];
  const temp = [...options];

  for (let i = 0; i < count && temp.length > 0; i++) {
    const index = Math.floor(Math.random() * temp.length);
    result.push(temp.splice(index, 1)[0]);
  }

  return result;
}

const participants = ["张三", "李四", "王五", "赵六", "钱七"];
const winners = multiDraw(participants, 3); // 抽取3个不重复的获奖者
console.log(winners);

可视化抽签效果

实现带有动画效果的抽签界面：

function animateDraw(element, options, duration = 3000) {
  let startTime;
  const interval = 100; // 变化间隔(ms)

  function update(time) {
    if (!startTime) startTime = time;
    const elapsed = time - startTime;
    const progress = Math.min(elapsed / duration, 1);

    // 快速切换显示不同选项
    const index = Math.floor(Math.random() * options.length);
    element.textContent = options[index];

    if (progress < 1) {
      requestAnimationFrame(update);
    } else {
      // 最终结果
      const finalIndex = Math.floor(Math.random() * options.length);
      element.textContent = options[finalIndex];
    }
  }

  requestAnimationFrame(update);
}

// HTML中需要有一个id为"result"的元素
animateDraw(document.getElementById("result"), ["选项1", "选项2", "选项3"]);