JavaScript 实现随机点名系统

作者:青柠时间:2026-10-24 09:17:53浏览:295

本文介绍如何使用 JavaScript 实现一个简单的随机点名系统。通过获取 DOM 元素、利用 setInterval 和 clearInterval 控制定时器,以及 Math.random 生成随机索引,实现点击按钮后在多个名字间快速切换并随机停止的效果。

JavaScript 实现随机点名系统

本文介绍如何使用 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>

以上内容为本文的全部分享,旨在为读者提供学习参考。欢迎对相关内容感兴趣的用户继续支持本站。

作者最新文章