下面是关于“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技术站