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