用html写一个炫酷的随机点名系统
时间: 2023-04-06 22:03:55 浏览: 127
好的,我可以回答这个问题。以下是一个简单的用 HTML 和 JavaScript 实现的随机点名系统:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机点名系统</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 2em;
margin-top: 2em;
}
button {
font-size: 1.2em;
padding: 0.5em 1em;
margin-top: 1em;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>随机点名系统</h1>
<p>点击下面的按钮随机选择一个名字:</p>
<p id="name"></p>
<button onclick="randomName()">点名</button>
<script>
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"];
function randomName() {
var index = Math.floor(Math.random() * names.length);
document.getElementById("name").innerHTML = names[index];
}
</script>
</body>
</html>
```
这个系统包含一个按钮和一个用于显示随机名字的段落。当用户点击按钮时,JavaScript 代码会从一个预定义的名字数组中随机选择一个名字,并将其显示在段落中。