JavaScript实现抖音较火的随机点名系统
Posted zhzq1111
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现抖音较火的随机点名系统相关的知识，希望对你有一定的参考价值。
前段时间刷抖音，发现一个比较好玩的随机抽查系统，老师可以用它抽查到的名字回答问题，提高课堂活跃度和专注度。今天我用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>
效果图如下：
当然也可以实现简单的抽奖，，欢迎大佬批评教育
以上是关于JavaScript实现抖音较火的随机点名系统的主要内容，如果未能解决你的问题，请参考以下文章