JS 随机数字抽签
2024-09-19 01:25: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>
最新文章
- openwrt下部署adbyby去广告大师 免luci 带自启动,自动开启透明代理
- Javascript 接口模拟
- HDU1116 Play on Words(有向图欧拉通路)
- netstat监控大量ESTABLISHED连接与Time_Wait连接问题(转载)
- mongodb 入门笔记
- Kettle 实现mysql数据库不同表之间数据同步——实验过程
- Corn Fields
- 14.5.2.4 Locking Reads 锁定读:
- 让sublime支持gbk常用编码
- zookeeper 数据存储特点
- 【转】聊聊HTTPS和SSL/TLS协议
- Android界面(1) 使用TextView实现跑马灯效果
- Spring MVC 快捷定义 ViewController
- 带缓冲I/O 和不带缓冲I/O的区别与联系
- Coursera Deep Learning 2 Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization - week2, Assignment(Optimization Methods)
- Android中如何解决editText一进入activity就自动获取焦点的bug
- mybatis 插入数据 在没有commit时 获取主键id
- A. 【UNR #2】积劳成疾
- TYVJ.1864.[Poetize I]守卫者的挑战(概率DP)
- Python3+Dlib实现简单人脸识别案例