<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Math.random方法彩票随机数的生成-升级版</title>
<style type=
"text/css"
>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 600px;
height: 300px;
background-color: #f8e2e2;
margin: 0 auto;
}
.list{
width: 440px;
margin: 0px auto;
}
.list li{
list-style: none;
width: 30px;
height: 30px;
display: inline-block;
border: 1px solid #fff;
border-radius: 30px;
line-height: 30px;
text-align: center;
margin: 15px auto 15px;
}
.wrap p{
text-align: center;
}
.wrap p button{
text-align: center;
width: 100px;
}
#setBtn{
background-color: red;
color: #fff;
border: none;
}
.active{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div
class
=
"wrap"
id=
"wrap"
>
<ul
class
=
"list"
>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
</ul>
<p>
<button id=
"setBtn"
>随机红球</button>
<button id=
"clearBtn"
>清空</button>
</p>
</div>
<script type=
"text/javascript"
>
var
ballList = document.getElementById(
"wrap"
).getElementsByTagName(
"li"
);
var
setBtn =document.getElementById(
"setBtn"
);
var
clearBtn =document.getElementById(
"clearBtn"
);
function
rnd(min, max) {
return
parseInt(Math.random()*(max - min + 1) + min);
}
function
rndArray(min, max, length) {
var
arr = [];
while
(arr.length < length) {
var
rand = rnd(min, max);
if
(arr.indexOf(rand) == -1) {
arr.push(rand);
}
}
arr.sort(
function
(a, b){
return
a - b;})
return
arr;
}
function
selectBall() {
for
(
var
j = 0; j < ballList.length; j++) {
ballList[j].className =
""
;
}
var
arr = rndArray(1,33,7);
for
(
var
i = 0; i < arr.length; i++) {
ballList[arr[i]-1].className =
"active"
;
}
}
var
timer = 0;
setBtn.onclick =
function
() {
clearTimeout(timer);
timer = setInterval(selectBall,100);
setTimeout(
function
() {
clearTimeout(timer);
},3000)
}
clearBtn.onclick =
function
() {
clearTimeout(timer);
for
(
var
j = 0; j < ballList.length; j++) {
ballList[j].className =
""
;
}
}
</script>
</body>
</html>