您的位置：首页 > Web前端 > JavaScript

基于JS实现的随机数字抽签实例

2016-12-08 17:03 633 查看

话不多说，附上源码，仅供大家参考

<!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
);
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
;
$("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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 随机数字抽签

相关文章推荐

新的分享

章节导航