用html实现随机点名器
时间: 2023-11-06 10:07:07 浏览: 251
好的,以下是一个简单的用 HTML 实现的随机点名器:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机点名器</title>
<meta charset="UTF-8">
<style>
h1 {
text-align: center;
}
#name {
font-size: 30px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
button {
display: block;
margin: 0 auto;
margin-top: 50px;
padding: 10px 20px;
font-size: 20px;
border-radius: 5px;
background-color: #3498db;
color: #fff;
border: none;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>随机点名器</h1>
<div id="name"></div>
<button onclick="randomName()">点名</button>
<script>
var names = ["小明", "小红", "小刚", "小李", "小张"]; // 姓名数组
var nameDiv = document.getElementById("name"); // 名字显示区域
// 随机选取一个姓名并在页面上显示
function randomName() {
var randomIndex = Math.floor(Math.random() * names.length);
nameDiv.innerHTML = names[randomIndex];
}
</script>
</body>
</html>
```
这个随机点名器的功能很简单,就是从一个预设的姓名数组中随机选取一个姓名,并在页面上显示。你可以将姓名数组修改为自己需要的姓名列表。
阅读全文