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