核心思想 隨機產生規定範圍內的整數，然後再產生相同範圍內的整數，兩者相同時，則暫停。 所用知識 Math.random() * num: 產生從0到num的隨機數 Math.floor(): 向下取整 簡單的DOM操作等 技術擴展 擴展人數 添加停止鍵等 效果 代碼如下 html: css: jav ...
核心思想
- 隨機產生規定範圍內的整數，然後再產生相同範圍內的整數，兩者相同時，則暫停。
所用知識
- Math.random() * num: 產生從0到num的隨機數
- Math.floor(): 向下取整
- 簡單的DOM操作等
技術擴展
- 擴展人數
- 添加停止鍵等
效果
代碼如下
- html:
<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>
- css:
<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>
- javascript:
<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]
