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