ADD file via upload

index.js

@@ -0,0 +1,134 @@
+
+// 1.将数据渲染到页面上
+/** @type {HTMLElement} */
+let content = document.querySelector('#content')
+
+students.forEach(function (item, i) {
+  let div = document.createElement('div')
+  div.classList.add('cell')
+  div.innerHTML = item
+  content.appendChild(div)
+})
+
+// 点击开始按钮
+/** @type {HTMLElement} */
+let start = document.querySelector('#start')
+
+/** @type {HTMLElement} 被选中的小伙伴 */
+let selectedName = document.querySelector('#selectTitle span')
+
+/** 被选中的小伙伴们 */
+let selectedArr = []
+
+/** 未被选中的小伙伴们的下标 */
+let UnSelectedIndex = students.map(function (item, i) {
+  return i
+})
+
+/** 正在点名，防止多次点击 */
+let isRunning = false
+
+// 点击开始按钮点名
+start.onclick = function () {
+
+  if (isRunning) {
+    return 0
+  }
+
+  if (UnSelectedIndex.length === 0) {
+    alert('当前所有同学都已经被选中！')
+    return 0
+  }
+
+  /** @type {HTMLElement[]} 获取页面所有名字元素 */
+  let items = document.querySelectorAll('.cell')
+  /** 已选中项的下标 */
+  let index = -1
+  /** 计数器 */
+  let count = 8
+
+  // 设置计时器
+  let timer = setInterval(function () {
+    isRunning = true
+    // 获取随机数
+    index = Math.floor(Math.random() * UnSelectedIndex.length)
+    if (document.querySelector('.cell.active')) {
+      document.querySelector('.cell.active').classList.remove('active')
+    }
+    items[UnSelectedIndex[index]].classList.add('active')
+
+    // 点名完成，清除计时器
+    if (count <= 0) {
+      isRunning = false
+      items[UnSelectedIndex[index]].classList.add('selected')
+      selectedArr.push(students[UnSelectedIndex[index]])
+      selectedName.innerHTML = selectedArr.toString()
+
+      UnSelectedIndex.splice(index, 1)
+      clearInterval(timer)
+    }
+
+    count--
+  }, 100)
+
+}
+// 假设students数组已经在data.js中定义
+// const students = [...]; // 学生名单
+
+// 假设students数组已经在data.js中定义
+// const students = [...]; // 学生名单
+
+// 假设students数组已经在data.js中定义
+// const students = [...]; // 学生名单
+
+// 获取页面元素
+const selectedStudentSpan = document.getElementById('selectedStudent');
+const scoreSpan = document.getElementById('score');
+const startButton = document.getElementById('start');
+const resetButton = document.getElementById('reset'); // 假设重置按钮的id为'reset'
+const contentDiv = document.getElementById('content');
+
+// 初始化积分变量
+let score = 0;
+
+// 更新点到的人和积分显示的函数
+function updateDisplay(selectedStudent) {
+    selectedStudentSpan.textContent = selectedStudent ? selectedStudent + ' 被点到' : '当前没有被点到的小伙伴';
+    scoreSpan.textContent = '当前积分: ' + score;
+}
+
+// 点名逻辑
+startButton.addEventListener('click', () => {
+    if (students.length === 0) {
+        alert('没有学生名单！');
+        return;
+     }
+
+     // 随机选择一个学生
+     const randomIndex = Math.floor(Math.random() * students.length);
+     const selectedStudent = students[randomIndex];
+
+     // 更新页面显示
+    updateDisplay(selectedStudent);
+
+     // 更新积分
+    score += 1;
+    updateDisplay(); // 重新调用updateDisplay以更新积分显示
+});
+
+// 重置积分的函数
+function resetScore() {
+    score = 0;
+    updateDisplay(''); // 清空被点到的学生显示，并更新积分
+    students.length = 0; // 清空学生名单，允许重复点名
+}
+
+// 重置按钮的点击事件监听器
+if (resetButton) {
+    resetButton.addEventListener('click', resetScore);
+}
+
+// 初始化页面显示
+updateDisplay('');
+
+