随机点名器html代码
时间: 2024-10-07 14:01:26 浏览: 26
随机点名器通常是一个简单的网页应用,用于在线课堂或其他需要抽选人员参与的活动中随机选择参与者。以下是创建一个基本HTML和JavaScript代码示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>随机点名器</title>
</head>
<body>
<h1>请输入学生姓名列表:</h1>
<textarea id="studentNames" rows="5" cols="40"></textarea><br>
<button onclick="selectRandom()">点击随机抽取</button>
<p id="selectedStudent">选中学生: </p>
<script>
function selectRandom() {
const studentList = document.getElementById('studentNames').value.split('\n'); // 分割文本行
if (studentList.length > 0) {
const randomIndex = Math.floor(Math.random() * studentList.length); // 随机索引
const selectedStudent = studentList[randomIndex];
document.getElementById('selectedStudent').textContent = '选中学生: ' + selectedStudent;
} else {
alert('名单为空,请输入至少一名学生的姓名。');
}
}
</script>
</body>
</html>
```
这个例子中,用户可以在`<textarea>`里输入学生的姓名,每行一个名字。当点击“点击随机抽取”按钮时,会从列表中随机选取一个,并显示在页面上。