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日

相关文章

  • JS同步、异步、延迟加载的方法

    JS同步、异步、延迟加载是我们在web开发中常遇到的概念。以下是详细讲解它们的方法: 同步和异步的概念 JavaScript是一门单线程语言,即一次只能执行一个任务,当一个任务在执行时,其他的任务得等待。同步和异步就是描述这种等待的机制。 同步:即任务必须按照顺序执行,每个任务耗时过长时,会使页面失去响应,页面卡死的问题浮现。例如,使用循环方式计算1到100…

    css 2023年6月9日
    00
  • 移动端界面的适配

    移动端界面的适配是指在不同尺寸、不同设备的情况下使网页显示效果一致。常见的移动设备包括手机、平板电脑等。本文将介绍移动端适配的完整攻略,包括布局、字体、图片等方面。 布局适配 使用viewport 在移动端,窗口宽度是相对固定的,窗口高度则会因为地址栏、底部操作栏等因素不同而变化。所以在移动端,我们使用viewport来设置可视区域的大小。设置viewpor…

    css 2023年6月10日
    00
  • Vue实现动态圆环百分比进度条

    实现动态圆环百分比进度条的主要过程分为以下几步: 引入Vue、SVG等需要的依赖和工具 搭建Vue组件结构和布局 动态计算圆环的半径、圆心坐标等关键参数 使用SVG绘制圆环进度条 通过Vue数据驱动更新圆环的进度值 下面详细讲解每一步的实现过程。 1. 引入依赖和工具 首先需要引入Vue、SVG等需要的依赖和工具,可以在<head>标签中引入下列…

    css 2023年6月10日
    00
  • css实现文字垂直居中的代码第1/2页

    当需要将文字垂直对齐到容器中心时,可以使用CSS的flexbox布局或者行高+伪元素的方式实现。下面分别对这两种方法进行说明。 方法一:flexbox布局 Flexbox布局允许我们通过align-items属性将元素的内容垂直居中。具体实现方式如下: 创建一个容器元素,并设置display为flex以启用flexbox布局。 通过align-items属性…

    css 2023年6月9日
    00
  • Css Reset(复位)的简单介绍

    CSS Reset(复位)的简单介绍 在编写CSS样式时,不同的浏览器可能会有不同的默认样式,这会导致网页在不同浏览器中显示效果不一致。因此,我们需要进行CSS Reset(复位)来重置这些默认样式。 什么是CSS Reset? CSS Reset是一种将浏览器默认样式表重置为我们期望样式的方法。它会将各个元素的margin、padding、font-siz…

    css 2023年6月9日
    00
  • js实现按钮颜色渐变动画效果

    以下是关于JS实现按钮颜色渐变动画效果的完整攻略,包含实现方法以及两条示例说明。 实现方法 实现按钮颜色渐变动画效果的方法有很多种,这里给出一种基于JS和CSS的实现方法,具体步骤如下: 声明一个按钮元素,例如以下代码: html <button id=”myButton”>点击按钮</button> 在CSS中为这个按钮添加渐变的背…

    css 2023年6月9日
    00
  • jquery 元素相对定位代码

    jQuery是一款基于JavaScript的快速、简洁的JavaScript库,它封装了许多常见的基础性操作(如DOM操作、事件处理、动画效果等),使用起来更加方便快捷。下面详细讲解和演示如何使用jQuery元素相对定位的代码。 1.概述 在jQuery中,通过设置元素的CSS属性来实现元素相对定位。该定位方式依赖于元素的父级元素,因此需要理解元素嵌套层次关…

    css 2023年6月10日
    00
  • PS怎么设置CSS样式? PS中的图形CSS样式使用方法

    下面是详细的攻略: PS设置CSS样式 如果你在使用PS设计网页时,想要将PS中的图形样式直接应用到CSS代码中,可以按照以下步骤进行操作: 首先,在PS中选择你想要编辑的图形层,在“图层”面板中单击该图形层。 然后,在“图层样式”面板中,你可以看到有很多可选的样式选项,如阴影、边框、填充等。在这些选项中,你可以选择需要的样式进行编辑。 当你完成了样式的编辑…

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