js实现选题

使用JavaScript实现选题功能

基础实现方法

创建一个简单的选题功能可以通过数组和随机数生成器实现。定义一个包含选项的数组，使用Math.random()方法随机选择一个元素。

const options = ['选项A', '选项B', '选项C', '选项D'];
const randomIndex = Math.floor(Math.random() * options.length);
const selectedOption = options[randomIndex];
console.log(selectedOption);

加权随机选择

如果需要不同选项有不同的选中概率，可以给每个选项分配权重值。计算总权重后，根据随机数落在哪个区间来确定选中项。

const weightedOptions = [
  {option: '选项A', weight: 10},
  {option: '选项B', weight: 30},
  {option: '选项C', weight: 60}
];

const totalWeight = weightedOptions.reduce((sum, item) => sum + item.weight, 0);
let random = Math.random() * totalWeight;
let weightSum = 0;

for (const item of weightedOptions) {
  weightSum += item.weight;
  if (random <= weightSum) {
    console.log(item.option);
    break;
  }
}

排除已选选项

实现一个不重复选择的功能，需要记录已选选项并从剩余选项中继续选择。

const allOptions = ['A', 'B', 'C', 'D', 'E'];
const selectedOptions = [];

function selectUniqueOption() {
  const availableOptions = allOptions.filter(opt => !selectedOptions.includes(opt));
  if (availableOptions.length === 0) return null;

  const randomIndex = Math.floor(Math.random() * availableOptions.length);
  const selected = availableOptions[randomIndex];
  selectedOptions.push(selected);
  return selected;
}

可视化选题界面

结合HTML创建一个简单的选题界面，点击按钮随机选择并显示结果。

<div id="options-container">
  <p>可选项目: A, B, C, D</p>
  <button id="select-btn">随机选择</button>
  <p id="result"></p>
</div>

<script>
  document.getElementById('select-btn').addEventListener('click', function() {
    const options = ['A', 'B', 'C', 'D'];
    const randomIndex = Math.floor(Math.random() * options.length);
    document.getElementById('result').textContent = `选中: ${options[randomIndex]}`;
  });
</script>

进阶实现方法

对于需要更复杂选择逻辑的场景，可以创建一个可配置的选择器类，支持多种选择策略。

class OptionSelector {
  constructor(options) {
    this.options = options;
  }

  randomSelect() {
    const index = Math.floor(Math.random() * this.options.length);
    return this.options[index];
  }

  weightedSelect(weights) {
    if (weights.length !== this.options.length) {
      throw new Error('Weights array must match options length');
    }

    const totalWeight = weights.reduce((a, b) => a + b, 0);
    let random = Math.random() * totalWeight;
    let weightSum = 0;

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

// 使用示例
const selector = new OptionSelector(['红', '黄', '蓝']);
console.log(selector.randomSelect());
console.log(selector.weightedSelect([1, 2, 3]));