首页html实现随机点名小程序

html实现随机点名小程序

时间: 2023-08-17 19:02:49 浏览: 146

你可以使用JavaScript来实现一个简单的随机点名小程序，然后将其嵌入到HTML页面中。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>随机点名小程序</title> <style> #result { font-size: 24px; font-weight: bold; margin-top: 20px; } </style> </head> <body> <h1>随机点名小程序</h1> <button onclick="randomName()">点名</button> <div id="result"></div> <script> var names = ["张三", "李四", "王五", "赵六", "陈七"]; // 姓名列表 function randomName() { var randomIndex = Math.floor(Math.random() * names.length); // 生成随机索引 var randomName = names[randomIndex]; // 获取随机姓名 document.getElementById("result").innerHTML = "被点到的同学是：" + randomName; } </script> </body> </html> ``` 在这个示例中，我们定义了一个包含一些姓名的数组。当点击"点名"按钮时，JavaScript代码会生成一个随机索引，并根据该索引从数组中获取对应的姓名，然后将结果显示在页面上。你可以根据自己的需求修改代码，例如添加更多的姓名到数组中，调整页面样式等。希望对你有帮助！

阅读全文