前段時間刷抖音，發現一個比較好玩的隨機抽查系統，老師可以用它抽查到的名字回答問題，提高課堂活躍度和專注度。今天我用javaScript實現了一個，代碼如下！！！可直接粘貼
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>點名/抽獎系統</title> 9 <style> 10 body { 11 user-select: none; 12 } 13 14 .showBox { 15 margin: 50px auto; 16 width: 620px; 17 height: auto; 18 overflow: hidden; 19 text-align: center; 20 } 21 22 .showBox .title { 23 text-align: left; 24 font-size: 26px; 25 line-height: 100px; 26 text-decoration: underline; 27 font-style: oblique; 28 color: #c06; 29 } 30 31 .showBox .showName { 32 height: 400px; 33 font-size: 40px; 34 line-height: 400px; 35 border-radius: 20px; 36 box-shadow: 2px 2px 5px #333; 37 } 38 39 .showBox .btn { 40 margin-top: 20px; 41 display: inline-block; 42 padding: 10px 15px; 43 cursor: pointer; 44 color: #fff; 45 background-color: #c06; 46 border-radius: 5px; 47 box-shadow: 1px 1px 1px #333; 48 } 49 </style> 50 </head> 51 52 <body> 53 <div class="showBox"> 54 <div class="title">點名/抽獎系統</div> 55 <div class="showName">ready</div> 56 <div class="btn">開始</div> 57 </div> 58 <script> 59 var oShowName = document.querySelector(".showName"), 60 oBtn = document.querySelector(".btn"), 61 bol = true, //通過判斷true/false完成開始/結束的效果 62 timer; //定時器 63 64 // 封裝函數 65 function myFun() { 66 var aName = ["二哈", "憶梓", "松果林", "松果菊", "無為", "萬章", "默契", "胖賊", "孟亞蘭", "張大胖", "奢望", "西奧"], //此數組放置姓名，用英文分號包裹，英文逗號分隔 67 ranNum = parseInt(Math.random() * aName.length); 68 oShowName.innerHTML = aName[ranNum]; 69 } 70 oBtn.onclick = function() { 71 if (bol) { 72 bol = false; 73 oBtn.innerHTML = "結束"; 74 oShowName.style.color = "#099"; 75 timer = setInterval("myFun()", 200); //bol為true時開啟定時器 76 } else { 77 bol = true; 78 oBtn.innerHTML = "開始"; 79 oShowName.style.color = "#fc3"; 80 clearInterval(timer); //bol為false時結束定時器 81 } 82 } 83 </script> 84 </body> 85 86 </html>
效果圖如下：
當然也可以實現簡單的抽獎，，歡迎大佬批評教育