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,并点击“开始抽奖”按钮时,页面上的抽奖结果将会显示为十个随机抽出的姓名,例如:

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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jquery输入数字随机抽奖特效的简单实现代码 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 值得分享的轻量级Bootstrap Table表格插件

    当谈及Bootstrap表格插件时,Bootstrap Table通常是前端开发者们的首选。Bootstrap Table是一款高度可定制性和轻量级的Bootstrap表格插件。本文将提供关于如何使用Bootstrap Table插件的完整攻略,介绍如何配置和使用Bootstrap表格,如何添加分页器和搜索器,以及如何处理表单提交。 安装和使用Bootstr…

    css 2023年6月10日
    00
  • Bootstrap每天必学之前端开发框架

    Bootstrap每天必学之前端开发框架攻略 Bootstrap是一个前端开发框架,它为开发者提供了一系列易于使用的HTML、CSS和JavaScript组件。以下是关于如何快速学习并使用Bootstrap的详细攻略。 步骤一:下载Bootstrap 在开始使用Bootstrap之前,需要下载它的CSS和JavaScript文件,并将它们添加到项目中。可以通…

    css 2023年6月11日
    00
  • Vue使用Less与Scss实现主题切换方法详细讲解

    下面是“Vue使用Less与Scss实现主题切换方法详细讲解”的完整攻略。 1. 使用Less实现主题切换 1.1 安装Less 在Vue项目中使用Less,首先需要安装Less的依赖,可以使用npm进行安装: npm install less less-loader –save-dev 1.2 配置webpack 在Vue项目的webpack配置文件中,…

    css 2023年6月9日
    00
  • CSS的各种居中——如何书写高质量代码

    以下是“CSS的各种居中——如何书写高质量代码”的完整攻略: CSS的各种居中——如何书写高质量代码 在 CSS 中,有多种方法可以实现元素的居中。以下是一些常见的实现方法。 水平居中 方法1:使用 text-align 属性 可以使用 text-align 属性将元素水平居中。例如: .container { text-align: center; } 上…

    css 2023年5月18日
    00
  • 使用Nuxt.js改造已有项目的方法

    使用Nuxt.js改造已有项目的方法,可以分为以下几个步骤: 第一步:选择合适的模式 Nuxt.js提供了两种不同的模式:Universal mode和SPA mode。Universal mode是在Server端进行页面渲染的模式,SPA mode则是采用客户端渲染的单页应用模式。两种模式各有优缺点,选择哪种模式需要根据业务需求进行考虑,如SEO需求、首…

    css 2023年6月10日
    00
  • JQuery的加载和选择器用法简单示例

    下面是关于“JQuery的加载和选择器用法简单示例”的完整攻略。 JQuery的加载 JQuery是一款JavaScript库,主要用于简化DOM操作、事件处理、动画效果等方面的开发。要使用JQuery,需要通过以下两种方式之一来加载: 方式一:从CDN加载JQuery JQuery可以从CDN(内容分发网络)加载,CDN具有内容分发、访问速度快等特点。以下…

    css 2023年6月10日
    00
  • 背景图片自适应浏览器分辨率大小并自动拉伸全屏代码

    下面是“背景图片自适应浏览器分辨率大小并自动拉伸全屏”的完整攻略。 设置背景图片 首先,在CSS文件或style标签中,使用如下代码设置背景图片: body { background-image: url(‘your-image-url’); } 其中,your-image-url是自己准备的背景图片链接地址。 自适应浏览器分辨率大小 使用CSS中的 bac…

    css 2023年6月9日
    00
  • CSS3下的渐变文字效果实现示例

    下面是“CSS3下的渐变文字效果实现示例”的完整攻略: 一、渐变文字效果实现的基本原理 CSS3提供了linear-gradient()和radial-gradient()两个函数,可以让我们轻松地实现渐变效果。这两个函数的基本语法如下: linear-gradient(direction, color-stop1, color-stop2, …); r…

    css 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部