代码:
<!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> .box { width: 200px; height: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid red; } </style> </head> <body> <div class="box"></div> <button class="btn">点击随机点名</button> <script> // 需求:点击按钮之后,随机显示一个名字,如果没有显示则禁用按钮 // 分析: // ①:点击的是按钮 // ②:随机抽取一个名字 // ③: 当名字抽取完毕,则利用 disabled 设置为 true // 获取事件源 let btn = document.querySelector('.btn') let box = document.querySelector('.box') // 数组姓名 let arrayName = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] // 添加监听事件 三要素 btn.addEventListener('click', function(){ // console.log(111) // 获取随机数 let random = getRandom(0, arrayName.length - 1) // 随机显示姓名 box.innerHTML = arrayName[random] // 删除抽过的姓名 arrayName.splice(random, 1) // console.log(arrayName) // 如果抽完了 禁用按钮 if(arrayName.length === 0){ btn.disabled = true btn.innerHTML = '抽完了~' } }) // 随机数公式 function getRandom(min = 0, max = 1) { return Math.floor(Math.random() * (max - min + 1)) + min } </script> </body> </html>
效果图:
web API-事件基础-随机点名
最新推荐文章于 2024-05-28 16:28:53 发布