用js完成包含学号和姓名的提问选号器 其中包含号码 姓名以及点名按钮和停止按钮
时间: 2024-12-23 22:17:05 浏览: 7
在JavaScript中,你可以使用HTML、CSS和JavaScript来创建一个简单的答题选号器,它会显示学生列表(包含学号和姓名),以及用于选择学生的“点名”按钮和暂停/停止的“停止”按钮。以下是一个基本的示例代码结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>选号器</title>
<style>
.student-list {
display: flex;
flex-direction: column;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<h2>学生列表</h2>
<div id="studentList" class="student-list"></div>
<!-- 点名按钮 -->
<button onclick="selectStudent()">点名</button>
<!-- 停止按钮 -->
<button onclick="stop()" id="stopButton">停止</button>
<script>
// 假设你有一个数组存储学生信息
const students = [
{ id: 1, name: '张三', number: '001' },
{ id: 2, name: '李四', number: '002' }, /* ... */
];
function selectStudent() {
// 这里可以添加实际的逻辑,比如改变背景色或高亮当前学生
// 例如,遍历学生列表并更改显示状态
students.forEach(student => {
document.getElementById(student.number).classList.remove('selected');
});
// 选取第一个学生作为示例
let selectedStudent = students[0];
document.getElementById(selectedStudent.number).classList.add('selected');
console.log(`已点到 ${selectedStudent.name}`);
}
function stop() {
// 模拟停止操作,这里只是一个占位符,可根据需要添加真正的停止逻辑
console.log("点名已暂停");
}
// 初始化列表,将学生信息渲染到页面上
students.forEach(student => {
const li = document.createElement('li');
li.textContent = `${student.number} - ${student.name}`;
li.id = student.number; // 给每个项加上唯一id
li.classList.add('studentItem'); // 添加基础样式
li.addEventListener('click', () => {
selectStudent();
});
document.getElementById('studentList').appendChild(li);
});
</script>
</body>
</html>
```
在这个例子中,`selectStudent`函数负责选中学生,而`stop`函数则表示暂停操作,但在此仅模拟了日志输出。你需要根据实际需求调整这两个函数的行为。
阅读全文