用HTML实现一个随机点名的系统里面的按钮包括开始点名,和停止
时间: 2024-04-07 10:33:40 浏览: 53
通过html+css+js制作随机点名
以下是用 HTML 和 JavaScript 实现一个随机点名系统的简单示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机点名系统</title>
<style>
.student-list {
list-style-type: decimal;
}
</style>
</head>
<body>
<h1>随机点名系统</h1>
<ul id="studentList" class="student-list">
<li>学生1</li>
<li>学生2</li>
<li>学生3</li>
<li>学生4</li>
<li>学生5</li>
</ul>
<button id="startButton" onclick="startRandomSelection()">开始点名</button>
<button id="stopButton" onclick="stopRandomSelection()" disabled>停止</button>
<script>
var intervalId;
var studentList = document.getElementById('studentList');
var startButton = document.getElementById('startButton');
var stopButton = document.getElementById('stopButton');
function startRandomSelection() {
startButton.disabled = true;
stopButton.disabled = false;
intervalId = setInterval(selectRandomStudent, 1000);
}
function stopRandomSelection() {
startButton.disabled = false;
stopButton.disabled = true;
clearInterval(intervalId);
}
function selectRandomStudent() {
var students = studentList.getElementsByTagName("li");
var randomIndex = Math.floor(Math.random() * students.length);
for (var i = 0; i < students.length; i++) {
if (i === randomIndex) {
students[i].style.backgroundColor = "yellow";
} else {
students[i].style.backgroundColor = "white";
}
}
}
</script>
</body>
</html>
```
在这个示例中,我们使用了 `<ul>` 元素来显示学生列表,并使用两个按钮来开始和停止随机点名过程。当点击 "开始点名" 按钮时,会触发 `startRandomSelection()` 函数,该函数会启动一个定时器,并每隔1秒钟调用 `selectRandomStudent()` 函数,以随机选择一个学生,并将其背景颜色设置为黄色。当点击 "停止" 按钮时,会触发 `stopRandomSelection()` 函数,该函数会清除定时器,停止随机点名过程。
你可以根据需要修改学生列表和样式,以及调整定时器的时间间隔。希望这个示例对你有所帮助!
阅读全文