<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 500px; height: 60px; border:1px solid #ccc; text-align: center; line-height:60px; margin:10px; background-color: gray; float: left; } </style> </head> <body onload="init()"> <button onclick="start()">隨機點名開始</button> <button onclick = "end() ">隨機點名結束</button> <div id="path"></div> </body> <script> // 實現隨機點名系統第一步就需要建立一個數組 var arr = ['四川大學','我的大學','四川理工大學','四川科技大學','四川輕化工大學','四川理工大學', '四川科技大學','四川輕化工大學','四川理工大學','四川科技大學','四川輕化工大學','四川理工大學','四川科技大學','四川輕化工大學' ,'四川理工大學','四川科技大學','四川輕化工大學','四川理工大學','四川科技大學','四川輕化工大學','四川理工大學','四川科技大學','四川輕化工大學' ,'四川理工大學','四川科技大學','四川輕化工大學','四川理工大學','四川科技大學','四川輕化工大學','四川輕化工大學']; // 設置一個索引值 var index = -1;//這個必須要是-1的，只有這樣隨機點名的效果才會出現 // 設置一個頂點事件段，用來停止用 var time; // 遍曆數組，能夠實現簡單的功能 // 當頁面初次進行載入的時候 function nowSend() { if(index != -1) { //將上一個選中的div的背景還原 document.getElementById("id" + index).style.backgroundColor = "gray"; } //隨機數 var num = Math.floor(Math.random() * arr.length); index = num; //記錄被選中的div的id //獲取對應的div var div = document.getElementById("id" + num); //設置背景顏色 div.style.backgroundColor = "red"; } // 隨機點名開始 function start() { // 要想要】跑起來，可以直接在裡面設置一個定時器 time = setInterval('nowSend()',100); } // 隨機點名結束 function end() { // 可以直接在裡面放一個清除定時器的 clearInterval(time); alert('接下來由'+arr[index]+'學生代表上臺進行演講') } // 初始化操作 function init() { //將數組顯示在頁面上 for(var i = 0; i < arr.length; i++) { //獲取父容器 var fa = document.getElementById("path"); //創建小div var div = document.createElement("div"); //設置id屬性,方便尋找 div.id = "id" + i; div.className = "box"; //方便給小div設置樣式 //設置小div中顯示的內容 div.innerHTML = arr[i]; //將小div放在父容器中 fa.appendChild(div); } } </script> </html>
