jquery输入数字随机抽奖特效的简单实现代码-前端开发

下面是关于“jquery输入数字随机抽奖特效的简单实现代码”的完整攻略：

下面是关于“jquery输入数字随机抽奖特效的简单实现代码”的完整攻略：

1. 确定页面布局

该抽奖效果需要一个输入框（用于输入抽奖人数）、抽奖按钮（用于触发抽奖）、一个抽奖区域（用于展示抽奖结果）、一个候选人列表（用于存储所有候选人信息）。

HTML 代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>抽奖</title>
  </head>
  <body>
    <input type="number" id="number" min="1" max="100" value="10">
    <button id="start">开始抽奖</button>
    <div id="result">抽奖结果</div>
    <ul id="candidates">
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
      <li>赵六</li>
    </ul>
  </body>
</html>

2. 编写抽奖逻辑

当点击“开始抽奖”按钮时，需要根据输入框中的抽奖人数进行随机抽奖。具体实现步骤如下：

2.1 获取数据

首先需要获取输入框中的抽奖人数，以及候选人列表中的所有候选人。

$(function () {
  $('#start').click(function () {
    var number = $('#number').val(); // 抽奖人数
    var candidates = $('#candidates li'); // 候选人列表
  });
});

2.2 数组随机排序

然后将所有候选人信息存入数组中，并使用 Fisher-Yates 算法进行随机排序。为了确保随机性，需要随机排序的起始位置从数组末尾开始，每次随机到的位置都放到数组末尾，逐步缩小随机范围。

$(function () {
  $('#start').click(function () {
    var number = $('#number').val(); // 抽奖人数
    var candidates = $('#candidates li'); // 候选人列表

    // 数组随机排序
    var arr = candidates.toArray();
    for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }
  });
});

2.3 取出抽奖结果

接下来，从随机排序后的数组中取出前 number 个元素作为抽奖结果，以数组形式返回。在代码中用 slice 方法取出抽奖结果并用 join 方法将数组转化为字符串。

$(function () {
  $('#start').click(function () {
    var number = $('#number').val(); // 抽奖人数
    var candidates = $('#candidates li'); // 候选人列表

    // 数组随机排序
    var arr = candidates.toArray();
    for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }

    // 取出抽奖结果
    var result = arr.slice(0, number).map(function (item) {
      return item.innerText;
    }).join('，');
  });
});

2.4 展示抽奖结果

最后将抽奖结果显示在结果区域中。

$(function () {
  $('#start').click(function () {
    var number = $('#number').val(); // 抽奖人数
    var candidates = $('#candidates li'); // 候选人列表

    // 数组随机排序
    var arr = candidates.toArray();
    for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = arr[i];
      arr[i] = arr[j];
      arr[j] = temp;
    }

    // 取出抽奖结果
    var result = arr.slice(0, number).map(function (item) {
      return item.innerText;
    }).join('，');

    // 展示抽奖结果
    $('#result').text(result);
  });
});

3. 示例说明

下面给出两个示例说明：

示例1

假设我们有 20 个人参加抽奖，候选人列表如下：

<ul id="candidates">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
  <li>赵六</li>
  <li>田七</li>
  <li>朱八</li>
  <li>刘九</li>
  <li>杨十</li>
  <li>黄十一</li>
  <li>钟十二</li>
  <li>周十三</li>
  <li>吴十四</li>
  <li>郑十五</li>
  <li>陈十六</li>
  <li>孙十七</li>
  <li>马十八</li>
  <li>韩十九</li>
  <li>朴二十</li>
  <li>丁二十一</li>
  <li>祝二十二</li>
</ul>

当输入抽奖人数为 5，并点击“开始抽奖”按钮时，页面上的抽奖结果将会显示为五个随机抽出的姓名，例如：

朴二十，吴十四，赵六，田七，祝二十二

示例2

假设我们有 30 个人参加抽奖，候选人列表如下：

<ul id="candidates">
  <li>张三</li>
  <li>李四</li>
  <li>王五</li>
  <li>赵六</li>
  <li>田七</li>
  <li>朱八</li>
  <li>刘九</li>
  <li>杨十</li>
  <li>黄十一</li>
  <li>钟十二</li>
  <li>周十三</li>
  <li>吴十四</li>
  <li>郑十五</li>
  <li>陈十六</li>
  <li>孙十七</li>
  <li>马十八</li>
  <li>韩十九</li>
  <li>朴二十</li>
  <li>丁二十一</li>
  <li>祝二十二</li>
  <li>高二十三</li>
  <li>蔡二十四</li>
  <li>曾二十五</li>
  <li>袁二十六</li>
  <li>何二十七</li>
  <li>彭二十八</li>
  <li>梁二十九</li>
  <li>史三十</li>
</ul>

当输入抽奖人数为 10，并点击“开始抽奖”按钮时，页面上的抽奖结果将会显示为十个随机抽出的姓名，例如：

张三，周十三，黄十一，袁二十六，刘九，梁二十九，史三十，李四，田七，马十八