小伙伴们,使用HTML、CSS和JavaScript来实现随机点名的功能吧,参与点名的学生有张三,李四,王五,马六,在点名过程中按钮显示stop,点击按钮停止后显示start
效果图:
小伙伴们,使用HTML、CSS和JavaScript来实现随机点名的功能吧,参与点名的学生有张三,李四,王五,马六,在点名过程中按钮显示stop,点击按钮停止后显示start
效果图:
登录后即可发布作业,立即登录
全部作业 40
// 获取元素
const nameDisplay = document.getElementById(‘name-display’);
const startStopBtn = document.getElementById(‘start-stop-btn’);
// 学生名字数组
const students = [‘张三’, ‘李四’, ‘王五’, ‘马六’];
let timer;
// 开始点名函数
function startCalling() {
startStopBtn.textContent =‘stop’;
timer = setInterval(() => {
const randomIndex = Math.floor(Math.random() * students.length);
nameDisplay.textContent = students[randomIndex];
}, 100);
}
// 停止点名函数
function stopCalling() {
startStopBtn.textContent =‘start’;
clearInterval(timer);
}
// 按钮点击事件监听
startStopBtn.addEventListener(‘click’, () => {
if (startStopBtn.textContent ===‘start’) {
startCalling();
} else {
stopCalling();
}
});