基于JS实现的随机数字抽签实例
作者：扯 时间：2024-04-16 09:27:23
话不多说，附上源码，仅供大家参考
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
var numArray = new Array();
var personNum = 30;
$(function () {
for (var i = 0; i < personNum; i++) {
numArray[i] = i;
}
$("li").click(function () {
var n = Math.floor(Math.random() * numArray.length + 1) - 1; //生成随机数
$(this).text(numArray[n]);
numArray.splice(n, 1); //移除随机数
});
$("#btnStart").click(function () {
var totalArray = new Array();
$("li").each(function (i, v) {
totalArray[i] = v.innerText;
});
var n = Math.floor(Math.random() * totalArray.length + 1) - 1; //生成随机数
this.value = totalArray[n];
$("li").each(function (i, v) {
if (v.innerText == $("#btnStart").val()) {
this.style.background = "red";
}
else
{
this.style.background = "white";
}
});
});
});
</script>
<style type="text/css">
ul {
/*display: block;
float:left;*/
}
ul li {
width: 150px;
height: 150px;
line-height: 150px;
border: 1px solid gray;
float: left;
margin-left: 10px;
margin-top: 10px;
list-style-type: none;
text-align: center;
font-size: 20px;
}
#btnStart {
width: 100px;
height: 30px;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
<ul>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
<li>click me!</li>
</ul>
</div>
<input id="btnStart" type="button" value="Start" />
</body>
</html>
来源：http://www.cnblogs.com/gossip/p/4161787.html
标签：js,随机数字抽签
0
投稿猜你喜欢
Python 里最强的地图绘制神器
2023-07-17 12:36:43
使用Python对接OpenAi API实现智能QQ机器人的方法
2023-08-12 10:24:25
JS限制文本框只能输入数字和字母方法
2023-07-02 05:25:43
用Python编写一个漏洞验证脚本
2022-03-23 02:30:43
python中字符串变二维数组的实例讲解
2021-08-03 04:37:56
PyCharm创建Django项目的简单步骤记录
2023-08-28 11:03:37
Python使用itchat 功能分析微信好友性别和位置
2023-09-24 15:57:12
mysql alter table 修改表命令详细介绍
2024-01-13 21:35:38
Pandas数据分析之批量拆分/合并Excel
2023-03-28 19:39:58
Scrapy模拟登录赶集网的实现代码
2023-02-22 20:33:47
mysql缓冲和缓存设置详解
2024-01-27 02:39:18
Go语言Web编程实现Get和Post请求发送与解析的方法详解
2024-05-09 14:52:25
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2023-01-31 17:46:36
原生javascript实现匀速运动动画效果
2024-06-07 15:27:55
10个有用的Python字符串函数小结
2023-08-13 11:26:28
Vue+Websocket简单实现聊天功能
2024-04-30 10:29:50
关于useSSL=false和true的区别及说明
2024-01-25 03:27:40
MySQL高级特性——数据表分区的概念及机制详解
2024-01-28 12:30:28
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2021-07-01 14:41:42
详解vue组件开发脚手架
2024-05-09 15:15:34
