JavaScript 实现随机点名系统
作者:青柠时间:2026-10-24 09:17:53浏览:295
本文介绍如何使用 JavaScript 实现一个简单的随机点名系统。通过获取 DOM 元素、利用 setInterval 和 clearInterval 控制定时器,以及 Math.random 生成随机索引,实现点击按钮后在多个名字间快速切换并随机停止的效果。
JavaScript 实现随机点名系统
本文介绍如何使用 JavaScript 实现一个随机点名系统,供读者参考。
在课堂场景中,老师常在课前十分钟进行提问。由于以往仅按学号点名,导致部分学生被频繁抽中。为此,建议引入 JavaScript 开发的随机点名工具,以优化点名机制,避免重复抽中同一学生。
系统运行效果如下所示:

具体代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="box1">开始</button>
<button id="box2">结束</button>
<span id="box">Tom</span>
<script>
//获取页面中的元素
var btn1 = document.getElementById('box1');
var btn2 = document.getElementById('box2');
var span = document.getElementById('box');
var names = ['Tom', 'Jack', 'Lucy', 'Peter', 'Mark', 'Min', 'Liu', 'Rani'];
var timer;
btn1.onclick = function() {
window.clearInterval(timer);
timer = window.setInterval(countName, 100);
};
btn2.onclick = function() {
window.clearInterval(timer);
};
function countName() {
var index = parseInt(Math.random() * names.length);
span.innerHTML = names[index];
}
</script>
</body>
</html>
以上内容为本文的全部分享,旨在为读者提供学习参考。欢迎对相关内容感兴趣的用户继续支持本站。
作者最新文章
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
JavaScript新手常犯的编码错误与最佳实践指南
2026-11-04 22:12:38
