<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机点名(拓展)</title> <style> * { margin: 0; padding: 0; } h2, .btns { text-align: center; } .box { width: 600px; margin: 50px auto; display: flex; font-size: 25px; line-height: 40px; } .qs { width: 450px; height: 40px; color: red; } .btns button { width: 120px; height: 35px; margin: 0 50px; } </style> </head> <body> <h2>随机点名</h2> <div class="box"> <span>名字是:</span> <div class="qs">这里显示姓名</div> </div> <div class="btns"> <button class="start">开始</button> <button class="end">结束</button> </div> <script> // 准备阶段:声明数组 模拟数据 let arr = ['张三', '李四', '王五', '朱泽']; // 封装自定义随机函数 function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // 1. 获取元素对象 let qs = document.querySelector('.qs'); let start = document.querySelector('.start'); let end = document.querySelector('.end'); let t1; let random; // 2. 给开始按钮注册点击事件 // 事件监听 addEventListener('type', 处理程序) start.addEventListener('click', function() { // setInterval(处理程序, 毫秒数) t1=setInterval(function() { // 获取到一个随机整数 作为 arr 的下标(索引) random = getRandom(0, arr.length - 1); qs.innerHTML = arr[random]; }, 30) }) end.addEventListener('click',function(){ clearInterval(t1); arr.splice(random,1); if(arr.length==1) { start.disabled=true; end.disabled=true; } }) // 3. 给结束按钮注册点击事件 </script> </body> </html>
随机点名扩展
最新推荐文章于 2024-07-11 16:52:21 发布