JS实现随机点名系统-偶像资源网

用JS实现一个随机点名系统，供大家参考，具体内容如下

每次上课前10分钟，老师都会叫我们回答问题，奈何每次都是点学号，好像每次我都能中奖，我直接跟老师提议，老师，我用来JS来帮你写个随机点名的系统吧！这样就不会每次都抽到我了，哈哈

先看效果：

代码如下：

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

JS实现随机点名系统

请登录后发表评论