因为工作内容的需要自己琢磨了一个随机数的点名器,很早就写出了一版,今天无意间又看到了之前写的代码,还是有很多bug的,今天做了完善在这里分享给大家
<script type="text/javascript"> // 声明变量 var time, // 计时器 div, index, state=true, name; // 选中的用户名 div = document.getElementById('name'); // 创建一个数组用来存储数据 var name_list1 = ["孙萌", "樊鑫", "张新艳", "王文丽", "何玉丹", "袁珂珂", "王玉婷", "杨彩芳", "贾晓蕾", "孟倩", "梁伟廷", "刘慧玲", "张文轶", "吴迎春", "姚一凡", "刘志朋", "刘明慧", "马晓娟", "牛菲菲", "赵慧娴", "郭威", "王雨莎", "郭莹莹", "孙美绮", "邓捷", "任文静", "秦鑫", "胡玲", "马素素", "白晓雪", "付妍", "马霜", "雍芳", "韩亚迪", "王志新", "吴昊", "孙波", "刘京君", "刘浩波", "冷棚亮", "宋依波", "李光杰", "梁鸿健", "王广振", "杨维源", "王志威"]; var name_list=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; function start(){ // 生成一个随机数 if(name_list.length>0){ index= Math.floor(Math.random() * name_list.length); // 根据随机索引值来确定选中的姓名 name = name_list[index]; // 更改网页里div的值 div.innerHTML = name; // Window setTimeout() 方法 time = setTimeout("start()",50); }else{ div.innerHTML = "没人了"; } } function end() { clearTimeout(time); name_list.splice(index, 1); console.log(name_list); if (name_list.length == 0) { alert("没有了。"); return; } } </script>
HTML层
<div id="name">
开始点名
</div>
<div class="b2"> <button onclick="start()">开始</button> <button onclick="end()">结束</button> </div>
css层可自行调节
*{ margin:0; padding:0; } body { background-image: linear-gradient(60deg, #f46464 0%, #9c9ee5 100%); } #name { width: 300px; height: 300px; background:#fff; border:1px solid green; border-radius:10px; margin:50px auto; font-size: 50px; text-align:center; line-height:300px; } .b2 { width: 122px; margin: auto; } button { height:50px; width:50px; }