首页html制作随机点名系统

html制作随机点名系统

时间: 2023-07-03 16:23:08 浏览: 117

可以使用以下代码实现一个简单的随机点名系统： 1. HTML代码： ``` <!DOCTYPE html> <html> <head> <title>随机点名系统</title> <meta charset="UTF-8"> <style> body { font-family: Arial, sans-serif; font-size: 16px; } h1 { text-align: center; } .container { margin: auto; width: 50%; padding: 20px; border: 1px solid gray; border-radius: 5px; } .button { background-color: #4CAF50; border: none; color: white; padding: 10px 16px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } .button:hover { background-color: #3e8e41; } </style> </head> <body> <h1>随机点名系统</h1> <div class="container"> <p>请输入学生姓名，每个姓名之间使用英文逗号分隔：</p> <input type="text" id="names"> <br><br> <button class="button" onclick="randomName()">随机点名</button> <br><br> <p id="result"></p> </div> <script> function randomName() { var names = document.getElementById("names").value.split(","); var index = Math.floor(Math.random() * names.length); document.getElementById("result").innerText = "被选中的学生是：" + names[index]; } </script> </body> </html> ``` 2. 解释： - HTML部分包括一个输入框、一个按钮和一个用于显示结果的段落。 - 在JavaScript部分，我们首先获取输入框中的学生姓名，并使用`split()`函数将它们分隔为一个数组。 - 然后，我们使用`Math.random()`函数生成一个在0到1之间的随机数，并将其乘以学生姓名数组的长度，得到一个在0到数组长度之间的随机整数。 - 最后，我们将被选中的学生姓名显示在结果段落中。

阅读全文