首页显示所有人并随机点人html代码

显示所有人并随机点人html代码

时间: 2023-12-30 14:06:17 浏览: 26

以下是显示所有人并随机点名的 HTML 代码，你可以根据需要进行修改和美化： ```html <!DOCTYPE html> <html> <head> <title>随机点名器</title> <meta charset="UTF-8"> <style type="text/css"> body { font-family: Arial, sans-serif; text-align: center; background-color: #f2f2f2; } h1 { margin-top: 50px; font-size: 36px; color: #333; } p { font-size: 24px; color: #666; } button { padding: 10px 20px; font-size: 18px; color: #fff; background-color: #4CAF50; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 20px; } button:hover { background-color: #3e8e41; } </style> </head> <body> <h1>随机点名器</h1> <div id="names"></div> <button onclick="randomName()">点名</button> <script type="text/javascript"> var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]; // 姓名列表 // 显示所有姓名 var namesDiv = document.getElementById("names"); for (var i = 0; i < names.length; i++) { var p = document.createElement("p"); p.innerHTML = names[i]; namesDiv.appendChild(p); } // 随机点名 function randomName() { var index = Math.floor(Math.random() * names.length); // 随机生成一个索引 var name = names[index]; // 获取随机生成的姓名 alert("恭喜 " + name + " 同学被点名！"); } </script> </body> </html> ``` 在这个代码中，我们除了在页面上显示所有的姓名，还添加了一个弹窗来显示随机点名的结果。在 `randomName()` 函数中，我们通过随机生成一个索引来获取随机生成的姓名，并将其显示在弹窗中。你也可以根据需要，将点名结果显示在页面上。