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

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";

}

});

});

});

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;

}

• click me!
• click me!
• click me!
• click me!

• click me!
• click me!
• click me!
• click me!

• click me!
• click me!
• click me!
• click me!

• click me!
• click me!
• click me!
• click me!

• click me!
• click me!
• click me!
• click me!