首页随机点名系统——html初学实战

随机点名系统——html初学实战

时间: 2024-01-02 07:22:59 浏览: 84

以下是一个简单的随机点名系统的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>随机点名系统</title> <style> .container { text-align: center; margin-top: 100px; } .button { padding: 10px 20px; font-size: 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="container"> <h1>随机点名系统</h1> <button class="button" onclick="randomName()">点名</button> <h2 id="result"></h2> </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> ``` 这个随机点名系统使用了HTML和JavaScript来实现。在页面上有一个按钮，点击按钮后会随机选择一个姓名并显示在页面上。

阅读全文