创意十足：使用JavaScript打造简易点名器，点亮学习课堂

前端

2024-01-28 12:29:09

点名新风尚：科技为课堂赋能

传统的点名方式往往单调乏味，可能导致学生注意力不集中，甚至产生厌烦情绪。为了打破这种沉闷的局面，何不借助科技的力量，让点名过程也变得引人入胜呢？

JavaScript闪耀登场：点名新工具

JavaScript，作为一门强大的编程语言，拥有极高的灵活性与广泛的应用场景。正是由于其出众的特性，它成为了我们创建简易点名器的首选工具。

点名器原理：揭秘背后的奥秘

为了帮助大家充分理解点名器的运作原理，我们将使用一个示例来说明。假设我们的教室里有10位学生，每位同学都有一个唯一的编号，从1到10。

首先，我们需要创建一个一维数组arr，用来存储所有同学的名字。这个数组的长度为10，每个元素代表一位同学。
接下来的步骤是为点名器添加一个按钮。当我们点击这个按钮时，它将生成一个介于1到10之间的随机数。这个随机数代表被点名的同学的编号。
当随机数生成后，我们需要访问arr数组，并使用生成的随机数作为索引来获取对应的同学姓名。
最后，我们将点名同学的名字显示在屏幕上，同时改变该同学背景颜色以示区分。

JavaScript代码：赋予点名器生命

现在，我们进入代码实现的环节。以下是如何使用JavaScript来创建简易点名器的详细步骤：

创建HTML和CSS文件：

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>点名器</h1>
<button id="roll-call-button">点名</button>
<ul id="student-list"></ul>
<script src="script.js"></script>
</body>
</html>

#roll-call-button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#student-list {
list-style-type: none;
padding: 0;
}
#student-list li {
padding: 10px;
margin-bottom: 5px;
background-color: #fff;
color: #000;
}
#student-list li.active {
background-color: #4CAF50;
color: white;
}

在script.js文件中添加以下代码：

// 1. 创建一维数组来存储所有同学的名字
const arr = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"];

// 2. 获取按钮元素
const rollCallButton = document.getElementById("roll-call-button");

// 3. 获取学生列表元素
const studentList = document.getElementById("student-list");

// 4. 添加点击事件监听器到按钮
rollCallButton.addEventListener("click", () => {
// 5. 生成随机数
const randomNumber = Math.floor(Math.random() * arr.length);

// 6. 获取随机数对应的同学姓名
const studentName = arr[randomNumber];

// 7. 创建新的列表项元素
const newListItem = document.createElement("li");

// 8. 设置列表项元素的文本内容为随机数对应的同学姓名
newListItem.textContent = studentName;

// 9. 添加类名"active"到列表项元素
newListItem.classList.add("active");

// 10. 将列表项元素添加到学生列表元素中
studentList.appendChild(newListItem);
});