点名器，名字随机抽取，四种不同类型

共4个文件

html：4个

html

javascript

需积分: 4 0 下载量 139 浏览量 2024-02-22 14:30:36 上传评论收藏 3KB ZIP 举报

温馨提示

四种代码均可伪随机名字抽取，但xxxx2.html的代码更多，更复杂，请使用时量力而行。根据类型分为“名字抽取”和“点名器”两种类型。名字抽取点击按钮随机抽取提前输入的名字，每点击一次抽取一个。点名器开始点名，会不停变动名字开始抽取，当点击结束点名时打印出抽取的姓名（注意：开始点名和结束点名为同一按钮）。点名器可根据需要自行调节定时器时间。以注释修改位置均使用了JavaScript，但点名器.html未使用CSS,可参考点名器2.html修改。

资源推荐

资源详情

资源评论

收起资源包目录

代码.zip （4个子文件）

代码

名字抽取2.html 907B

点名器.html 1KB

名字抽取.html 813B

点名器2.html 2KB

共 4 条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点名器</title> <style> body { font-family: Arial, sans-serif; } .container { text-align: center; margin-top: 50px; } .name-display { font-size: 24px; margin-bottom: 20px; } .button { padding: 10px 20px; font-size: 16px; cursor: pointer; } </style> </head> <body> <div class="container"> <button class="button" onclick="toggleRollCall()">开始点名</button> <p class="name-display">天选之子：</p> </div> <script> var data = ["张三", "李四", "王五", "赵六", "钱七"]; var timer; var isRollCalling = false; function toggleRollCall() { var button = document.querySelector(".button"); var p = document.querySelector(".name-display"); if (!isRollCalling) { startRollCall(); button.innerText = "结束点名"; } else { clearInterval(timer); endRollCall(); button.innerText = "开始点名"; } isRollCalling = !isRollCalling; } function startRollCall() { var p = document.querySelector(".name-display"); timer = setInterval(function() { if (data.length > 0) { var randomIndex = Math.floor(Math.random() * data.length); p.innerText = data[randomIndex]; } else { clearInterval(timer); endRollCall(); } }, 0.2); // 每隔10毫秒更换一个名字 } function endRollCall() { var p = document.querySelector(".name-display"); clearTimeout(timer); console.log("天选之人：" + p.innerText); // 打印最后的人名 } </script> </body> </html>

评论收藏

内容反馈

资源评论