HTML制作一个随机抽取名字系统
时间: 2024-09-18 21:05:44 浏览: 57
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`函数会被触发,从名字列表中随机选取一个名字并显示在页面上。
阅读全文