html做一个随机点名
时间: 2023-11-06 13:08:36 浏览: 77
以下是一个使用HTML和JavaScript实现的随机点名程序:
```
<!DOCTYPE html>
<html>
<head>
<title>随机点名器</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
margin-top: 30px;
}
</style>
</head>
<body>
<h1>随机点名器</h1>
<p>点击下面的按钮随机点名</p>
<p id="result"></p>
<button class="btn" onclick="randomName()">点名</button>
<script>
var names = ["张三", "李四", "王五", "赵六", "钱七", "周八", "吴九", "郑十"]; // 姓名列表
var usedNames = []; // 已使用的姓名列表
function randomName() {
if (names.length === 0) {
alert("所有人都已经点过名了!");
return;
}
// 随机选择一个未使用的姓名
var index = Math.floor(Math.random() * names.length);
var name = names[index];
// 将选择的姓名添加到已使用列表中,并从姓名列表中删除
usedNames.push(name);
names.splice(index, 1);
// 显示选择的姓名
document.getElementById("result").innerHTML = "恭喜 " + name + " 被点名了!";
}
</script>
</body>
</html>
```
在该程序中,我们先声明了一个姓名列表和已使用姓名列表,并定义了一个`randomName()`函数来实现随机点名的逻辑。在该函数中,我们首先判断是否还有未使用的姓名,如果所有姓名都已经使用过了,则弹出提示框并退出函数;否则,我们随机选择一个未使用的姓名,并将其添加到已使用列表中,并从姓名列表中删除。最后,我们将选择的姓名显示在页面中。
我们在页面中添加一个按钮,并给它绑定了`randomName()`函数。当用户点击该按钮时,就会随机选择一个未使用的姓名,并将其显示在页面中。如果所有姓名都已经使用过了,则会弹出提示框。
阅读全文