核心思想
随机产生规定范围内的整数，然后再产生相同范围内的整数，两者相同时，则暂停。
所用知识
Math.random() * num: 产生从0到num的随机数Math.floor(): 向下取整简单的DOM操作等
技术扩展
扩展人数添加停止键等
效果
代码如下
html:
1 <div class="container">
2 <section class="demo">
3 <ul>
4 <li></li>
5 <li></li>
6 <li></li>
7 </ul>
8 </section>
9 <section class="students"><ul></ul></section>
10 <section class="buttonList">
11 <ul>
12 <li><button type="button">随机选一个</button></li>
13 <li><button type="button">随机选两个</button></li>
14 <li><button type="button">随机选三个</button></li>
15 </ul>
16 </section>
17 </div>
1 <style type="text/css">
2 * {
3 margin:
0;
4 padding:
0;
5 }
6 ul {
7 list-style:
none;
8 }
9 body {
10 width:
100%;
11 height:
100%;
12 background:
url("images/bg.jpg") no-repeat;
13 background-size:
cover;
14 }
15 button {
16 border:
none;
17 background-color:
transparent;
18 color:
#fff;
19 font-size:
20px;
20 }
21 .container {
22 width:
1200px;
23 height:
700px;
24 margin:
10px auto;
25 }
26 .container .demo, .container .buttonList {
27 width:
inherit;
28 height:
25%;
29 }
30 .container .students {
31 width:
inherit;
32 height:
50%;
33 }
34 .container .students li {
35 margin-right:
50px;
36 margin-bottom:
30px;
37 text-align:
center;
38 border-radius:
10px;
39 font-size:
20px;
40 font-weight:
bold;
41 }
42 .container .students li:nth-child(5n) {
43 margin-right:
0;
44 }
45 .container .buttonList li button {
46 float:
left;
47 width:
200px;
48 height:
60px;
49 background-color:
#4caf5085;
50 margin-right:
150px;
51 text-align:
center;
52 line-height:
60px;
53 border-radius:
10px;
54 margin-top:
50px;
55 font-weight:
bold;
56 }
57 .container .buttonList li button:hover {
58 background-color:
#4caf50;
59 }
60 .container .buttonList li:nth-child(1) {
61 margin-left:
150px;
62 }
63 .container .demo li {
64 width:
200px;
65 height:
150px;
66 background-color:
#4caf5085;
67 float:
left;
68 margin-right:
150px;
69 border-radius:
50%;
70 margin-top:
10px;
71 line-height:
150px;
72 font-weight:
bold;
73 color:
#fff;
74 font-size:
60px;
75 text-align:
center;
76 }
77 .container .demo li:first-child {
78 margin-left:
150px;
79 }
80 </style>
<script type="text/javascript">
var stuArray = ["小方", "小田", "小明", "小红", "小吕", "小于", "小美", "小绿", "李华", "小李", "小胡"
,
"小夏", "小徐", "小小", "小吴", "小陈", "小狗", "小许", "小熊", "小新"
];
var stuList = document.querySelector(".students").querySelector("ul"
);
var buttonList = document.querySelectorAll("button"
);
var demoList = document.querySelector(".demo").querySelectorAll("li"
);
for (
var i = 0; i < stuArray.length; i++
) {
var li = document.createElement("li"
);
stuList.appendChild(li);
li.innerHTML =
stuArray[i];
li.style.cssFloat = "left"
;
li.style.width = 200 + "px"
;
li.style.height = 60 + "px"
;
li.style.backgroundColor = "#4caf5085"
;
li.style.color = "#fff"
;
li.style.lineHeight = 60 + "px"
;
}
var stuArrayList = stuList.querySelectorAll("li"
);
function chooseOne () {
for (
var i = 0; i < stuArrayList.length; i++
) {
stuArrayList[i].style.background = "#4caf5085"
;
}
for (
var i = 0; i < demoList.length; i++
) {
demoList[i].innerHTML = ""
;
}
var interId = setInterval(
function () {
var x = Math.floor(Math.random() *
stuArray.length);
stuArrayList[x].style.backgroundColor = "green"
;
demoList[1].innerHTML =
stuArrayList[x].innerHTML;
var timeId = setTimeout(
function () {
stuArrayList[x].style.backgroundColor = "#4caf5085"
;
}, 100
);
var y = Math.floor(Math.random() *
stuArray.length);
if (y ==
x) {
clearTimeout(timeId);
clearInterval(interId);
stuArrayList[y].style.backgroundColor = "green"
;
}
}, 100
);
}
function chooseTwo () {
for (
var i = 0; i < stuArrayList.length; i++
) {
stuArrayList[i].style.background = "#4caf5085"
;
}
for (
var i = 0; i < demoList.length; i++
) {
demoList[i].innerHTML = ""
;
}
var interId = setInterval(
function () {
do {
var x1 = Math.floor(Math.random() *
stuArray.length);
var x2 = Math.floor(Math.random() *
stuArray.length);
} while (x1 ==
x2);
stuArrayList[x1].style.backgroundColor = "green"
;
stuArrayList[x2].style.backgroundColor = "green"
;
demoList[0].innerHTML =
stuArrayList[x1].innerHTML;
demoList[2].innerHTML =
stuArrayList[x2].innerHTML;
var timeId = setTimeout(
function () {
stuArrayList[x1].style.backgroundColor = "#4caf5085"
;
stuArrayList[x2].style.backgroundColor = "#4caf5085"
;
}, 100
);
var y1 = Math.floor(Math.random() *
stuArray.length);
var y2 = Math.floor(Math.random() *
stuArray.length);
if ((y1 == x1 && y2 == x2) || (y1 == x2 && y2 ==
x1)) {
clearTimeout(timeId);
clearInterval(interId);
stuArrayList[x1].style.backgroundColor = "green"
;
stuArrayList[x2].style.backgroundColor = "green"
;
}
}, 100
);
}
function chooseThree () {
for (
var i = 0; i < stuArrayList.length; i++
) {
stuArrayList[i].style.background = "#4caf5085"
;
}
for (
var i = 0; i < demoList.length; i++
) {
demoList[i].innerHTML = ""
;
}
var interId = setInterval(
function () {
do {
var x1 = Math.floor(Math.random() *
stuArray.length);
var x2 = Math.floor(Math.random() *
stuArray.length);
var x3 = Math.floor(Math.random() *
stuArray.length);
} while (x1 == x2 || x2 == x3 || x1 ==
x3);
stuArrayList[x1].style.backgroundColor = "green"
;
stuArrayList[x2].style.backgroundColor = "green"
;
stuArrayList[x3].style.backgroundColor = "green"
;
demoList[0].innerHTML =
stuArrayList[x1].innerHTML;
demoList[1].innerHTML =
stuArrayList[x2].innerHTML;
demoList[2].innerHTML =
stuArrayList[x3].innerHTML;
var timeId = setTimeout(
function () {
stuArrayList[x1].style.backgroundColor = "#4caf5085"
;
stuArrayList[x2].style.backgroundColor = "#4caf5085"
;
stuArrayList[x3].style.backgroundColor = "#4caf5085"
;
}, 100
);
var y1 = Math.floor(Math.random() *
stuArray.length);
var y2 = Math.floor(Math.random() *
stuArray.length);
var y3 = Math.floor(Math.random() *
stuArray.length);
if ((x1 == y1 && x2 == y2) || (x1 == y2 && x2 ==
y1)) {
clearTimeout(timeId);
clearInterval(interId);
stuArrayList[x1].style.backgroundColor = "green"
;
stuArrayList[x2].style.backgroundColor = "green"
;
stuArrayList[x3].style.backgroundColor = "green"
;
}
}, 100
);
}
buttonList[0].addEventListener("click",
function () {chooseOne()},
false);
buttonList[1].addEventListener("click",
function () {chooseTwo()},
false);
buttonList[2].addEventListener("click",
function () {chooseThree()},
false);
转载于:https://www.cnblogs.com/yuer20180726/p/11151561.html
相关资源：java随机点名器项目
