首页用html做一个随机点名系统

用html做一个随机点名系统

时间: 2023-11-06 17:08:38 浏览: 107

好的，我可以为您提供一个简单的随机点名系统的HTML代码示例： ``` <!DOCTYPE html> <html> <head> <title>随机点名系统</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; font-size: 16px; background-color: #f0f0f0; text-align: center; margin: 0; padding: 0; } h1 { font-size: 32px; color: #333; margin: 30px 0 20px 0; } button { background-color: #333; color: #fff; border: none; padding: 10px 30px; font-size: 18px; border-radius: 5px; cursor: pointer; } button:hover { background-color: #555; } .result { font-size: 24px; color: #333; margin-top: 50px; } </style> </head> <body> <h1>随机点名系统</h1> <button onclick="randomName()">开始点名</button> <div class="result" id="result"></div> <script> // 添加学生姓名，可以根据需要增加或删除 var students = ["张三", "李四", "王五", "赵六", "刘七", "周八", "吴九", "郑十"]; function randomName() { // 生成随机数 var rnd = Math.floor(Math.random() * students.length); // 显示结果 document.getElementById("result").innerHTML = "被点名的学生是：" + students[rnd]; } </script> </body> </html> ``` 将上述代码保存为名为“random.html”的HTML文件，然后在浏览器中打开该文件即可使用。每次单击“开始点名”按钮时，随机选择一个学生的姓名并在页面上显示。

阅读全文