jquery 随机名单

原创

mob64ca12f8a724 2024-04-27 06:57:17 ©著作权

文章标签 jQuery 生成器 html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f8a724的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery随机名单生成器

在开展抽奖活动、随机分组或者其他需要随机生成名单的场景中，我们经常需要使用到随机名单生成器。jQuery是一个流行的JavaScript库，提供了丰富的API和工具，方便我们操作DOM元素、处理事件等。本文将介绍如何使用jQuery编写一个简单的随机名单生成器。

准备工作

在使用之前，我们需要引入jQuery库。可以通过CDN方式引入，也可以下载到本地后引入：

<script src="

HTML结构

我们先在HTML中准备一个输入框用于输入名单，一个按钮用于生成随机名单，以及一个展示随机名单的区域：

<input type="text" id="name-input" placeholder="输入名单，用逗号分隔">
<button id="generate-btn">生成随机名单</button>
<ul id="random-list"></ul>

jQuery代码

接下来，我们编写jQuery代码，实现随机名单的生成逻辑。首先获取输入框中的名单，然后将名单按逗号分隔转换成数组，对数组进行随机排序，最后将随机排序后的名单显示在页面上：

$(document).ready(function() {
  $('#generate-btn').click(function() {
    var names = $('#name-input').val().split(',');
    names = names.map(function(name) {
      return name.trim();
    });
    names = shuffle(names);
    $('#random-list').empty();
    names.forEach(function(name) {
      $('#random-list').append('<li>' + name + '</li>');
    });
  });

  function shuffle(array) {
    var currentIndex = array.length, temporaryValue, randomIndex;
    while (currentIndex !== 0) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
    return array;
  }
});

序列图

下面是一个使用随机名单生成器的序列图，展示了用户输入名单、生成随机名单的过程：

sequenceDiagram
    participant User
    participant InputBox
    participant Button
    participant List

    User->>InputBox: 输入名单
    User->>Button: 点击生成按钮
    Button->>List: 生成随机名单