案例要求
1.点击点名按钮，名字界面随机显示，按钮文字由点名变为停止
2.再次点击点名按钮，显示当前被点名学生姓名，按钮文字由停止变为点名
案例源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Random Student Picker</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { text-align: center; } #nameDisplay { font-size: 24px; margin-bottom: 20px; } #toggleButton { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } </style> </head> <body> <div class="container"> <div id="nameDisplay"></div> <button id="toggleButton">点名</button> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { var students = ["小明", "小红", "小李", "小张", "小王", "小刚", "小花", "小美", "小华", "小军", "小强", "小丽", "小明", "小红", "小李", "小张", "小王", "小刚", "小花", "小美", "小华", "小军", "小强", "小丽"]; var interval; var isPicking = false; $('#toggleButton').click(function() { if (isPicking) { clearInterval(interval); isPicking = false; $(this).text('点名'); } else { isPicking = true; $(this).text('停止'); interval = setInterval(function() { var randomIndex = Math.floor(Math.random() * students.length); $('#nameDisplay').text(students[randomIndex]); }, 100); } }); }); </script> </body> </html>
