???<div class="container"> ???????<section class="demo"> ???????????<ul> ???????????????<li></li> ???????????????<li></li> ???????????????<li></li> ???????????</ul> ???????</section> ???????<section class="students"><ul></ul></section> ???????<section class="buttonList"> ???????????<ul> ???????????????<li><button type="button">随机选一个</button></li> ???????????????<li><button type="button">随机选两个</button></li> ???????????????<li><button type="button">随机选三个</button></li> ???????????</ul> ???????</section> ???</div>

 ???<style type="text/css"> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????ul { ???????????list-style: none; ???????} ???????body { ???????????width: 100%; ???????????height: 100%; ???????????background: url("images/bg.jpg") no-repeat; ???????????background-size: cover; ???????} ???????button { ???????????border: none; ???????????background-color: transparent; ???????????color: #fff; ???????????font-size: 20px; ???????} ???????.container { ???????????width: 1200px; ???????????height: 700px; ???????????margin: 10px auto; ???????} ???????.container .demo, .container .buttonList { ???????????width: inherit; ???????????height: 25%; ???????} ???????.container .students { ???????????width: inherit; ???????????height: 50%; ???????} ???????.container .students li { ???????????margin-right: 50px; ???????????margin-bottom: 30px; ???????????text-align: center; ???????????border-radius: 10px; ???????????font-size: 20px; ???????????font-weight: bold; ???????} ???????.container .students li:nth-child(5n) { ???????????margin-right: 0; ???????} ???????.container .buttonList li button { ???????????float: left; ???????????width: 200px; ???????????height: 60px; ???????????background-color: #4caf5085; ???????????margin-right: 150px; ???????????text-align: center; ???????????line-height: 60px; ???????????border-radius: 10px; ???????????margin-top: 50px; ???????????font-weight: bold; ???????} ???????.container .buttonList li button:hover { ???????????background-color: #4caf50; ???????} ???????.container .buttonList li:nth-child(1) { ???????????margin-left: 150px; ???????} ???????.container .demo li { ???????????width: 200px; ???????????height: 150px; ???????????background-color: #4caf5085; ???????????float: left; ???????????margin-right: 150px; ???????????border-radius: 50%; ???????????margin-top: 10px; ???????????line-height: 150px; ???????????font-weight: bold; ???????????color: #fff; ???????????font-size: 60px; ???????????text-align: center; ???????} ???????.container .demo li:first-child { ???????????margin-left: 150px; ???????} ???</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);