话不多说，附上源码，仅供大家参考
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持菜鸟教程(cainiaojc.com)！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#cainiaojc.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。