1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名器</title> <link rel="icon" href="http://caiyanli.top/images/cai.gif"> <style> .box,.zhu{ width:500px; margin:auto; } .box>div,button{ width:500px; height: 200px; vertical-align:middle; text-align:center; border:1px solid #ccc; font-size: 50px; color:#f03; display:block; } a{ text-decoration: none; font-size: 20px; } </style> </head> <body> <div class="box"> <div class="cai " id="cai">随机点名器</div> <button onclick="gotoRand()" id="btn">开 始</button> </div> <div class="zhu"><a href="http://caiyanli.top">跳转至主页</a></div> <script> //声明 所有的人名 组成的数组 var nameList = ['苏媛','陈露','王艳','王菲菲','陶正祥','彭文磊','袁杰','林凡浩','冯思玲','蔡严丽','顾思语','朱才华','陈乔','郭东文','余海涛','程鹏睿','许辰辰','马飞雄','方炜','姜熠杰','林程彪','钱宇阳','张春霞','张艳','胡振东','李文赛','金晓鹏','王强','许梦约','潘雨霞','林敏敏','陈姗姗','钟普伟','夏舟浩','夏洋涛','蒋豪','崔炜林','施可慧','张亿雯','沈铭晗','钱振宇','范子栋','王振','姚逍遥','闫壮壮','马伟东','毛丽华','唐锦辉','张霖淇','王涛','陈阳阳','陈凡','黄禄波','闫华杰','田伟凯','蒋超','朱希强','余德炳','付智御','刘晓','金陆坤','陈瀚祥','伍必成','李景旭','陈士采','陈日平','王慧萍','赵学江','张海涛','姚广磊','宋洁','陈方盛','黄国威','陈垟垟','郑姚敏','张甜']; //声明时间的变量 var timer = null; //开始 随机的函数 function gotoRand(){ //获取button 元素 var button = document.getElementById('btn'); //判断 是开始还是结束 if (timer === null) { //开启定时 timer = setInterval(getName, 100); //把button的内容改掉 button.innerHTML = "暂 停"; } else { //清除定时 clearInterval(timer); //修改button的内容 button.innerHTML = "开 始"; //把timer赋值为null timer = null; } } //随机获取姓名函数 function getName(){ //取随机数 var index = Math.floor(Math.random() * 10000000 % nameList.length); //取出姓名放入 div中 document.getElementById('cai').innerHTML = nameList[index]; } </script> </body> </html>
2.随机点名器