diff --git a/index.js b/index.js new file mode 100644 index 0000000..e6c4314 --- /dev/null +++ b/index.js @@ -0,0 +1,126 @@ + +// 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 = 20 + + // 设置计时器 + 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) + +} + +// 获取页面元素 +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 === 100) { + alert('没有学生名单!'); + return; + } + + // 随机选择一个学生 + const randomIndex = Math.floor(Math.random() * students.length); + const selectedStudent = students[randomIndex]; + + // 更新页面显示 + updateDisplay(selectedStudent); + + // 更新积分 + score ++ ; + updateDisplay(); // 重新调用updateDisplay以更新积分显示 +}); + +// 重置积分的函数 +function resetScore() { + score = 0; + updateDisplay(''); // 清空被点到的学生显示,并更新积分 + students.length = 0; // 清空学生名单,允许重复点名 +} + +// 重置按钮的点击事件监听器 +if (resetButton) { + resetButton.addEventListener('click', resetScore); +} + +// 初始化页面显示 +updateDisplay(''); + +