固定名单随机点名html
时间: 2023-11-02 12:34:17 浏览: 39
以下是一个简单的 HTML 网页示例,可以实现固定名单随机点名的功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定名单随机点名</title>
</head>
<body>
<h1>学生名单</h1>
<ul id="student-list">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<button onclick="randomPick()">随机点名</button>
<p id="result"></p>
<script>
function randomPick() {
// 获取学生名单列表元素
var studentList = document.getElementById("student-list");
// 获取学生名单列表中的所有学生元素
var students = studentList.getElementsByTagName("li");
// 生成一个随机数,范围是 0 到学生数量减一
var randomIndex = Math.floor(Math.random() * students.length);
// 获取被选中的学生的文本内容
var selectedStudent = students[randomIndex].textContent;
// 将结果显示在页面上
var result = document.getElementById("result");
result.innerText = "被点名的学生是:" + selectedStudent;
}
</script>
</body>
</html>
```
这个网页包含一个学生名单的无序列表,一个按钮和一个段落。当用户点击按钮时,JavaScript 代码会从学生名单中随机选出一个学生,并将结果显示在段落中。请注意,这里使用了 JavaScript 的 Math.random() 函数来生成随机数。