首页HTML制作一个随机抽取名字系统

HTML制作一个随机抽取名字系统

时间: 2024-09-18 20:05:44 浏览: 69

HTML可以配合JavaScript来创建一个随机抽取名字的简单系统。首先，在HTML中，你可以设置一个包含名字列表的可交互元素，比如一个下拉菜单或者按钮。这里是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>随机抽取名字</title> <style> /* 额外样式（可选） */ #nameList { width: 200px; } </style> </head> <body> <h1>随机抽取名字</h1> <select id="nameList" onchange="drawRandomName()">  <option value="张三">张三</option> <option value="李四">李四</option> <option value="王五">王五</option>  </select> <button onclick="drawRandomName()">抽取</button> <p id="displayResult"></p> <script> function drawRandomName() { var nameList = document.getElementById('nameList'); var randomIndex = Math.floor(Math.random() * nameList.length); var selectedName = nameList.options[randomIndex].value; document.getElementById('displayResult').innerText = "随机抽取到的名字是：" + selectedName; } </script> </body> </html> ``` 在这个例子中，当你选择下拉菜单中的名字或点击“抽取”按钮时，`drawRandomName`函数会被触发，从名字列表中随机选取一个名字并显示在页面上。

阅读全文