使用JavaScript怎么实现一个课堂随机点名系统

发布时间:2021-04-17 16:41:21 作者:Leah
来源:亿速云 阅读:301

这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个课堂随机点名系统,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

style样式

<style>
 .cor {
  background-color: #6083cd;
 }
 #box {
  width: 500px;
  border: 2px solid black;
  margin: 0 auto;
  height: 500px;
 }
 ul {
  list-style: none;
 }
 li {
  width: 50px;
  height: 50px;
  margin: 20px;
  float: left;
  line-height: 50px;
  text-align: center;
 }
 .center {
  width: 156px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
 }
 #pp {
  display: block;
  text-align: center;
  margin-top: 40px;
  font-size: 35px;
 
 }
 </style>

body排列

<div id="box">
 <h2 >点名系统</h2>
 <div class="center">
  <input type="button" value="开始点名" id="btn">
  <input type="button" value="停止点名" id="btn2">
 </div>
 <span id="pp"></span>
 <div id="dv">
 </div> 
 </div>

js代码

<script>
 function my$(id){
  return document.getElementById(id);
 }
 
 
 //定义数组,存放数值
 var arr = ["卓子贤","梁图","袁绍思","张家磊","梁文龙","方志豪","曾勇强","陈文"];
 
 //先创建一个ul加入到名字为dv的div中
 var oul = document.createElement("ul"); 
 my$("dv").appendChild(oul);
 //接下来遍历arr数组,动态创建li元素并且加入到ul中,并且把数组变量动态写到li中
 for(var i=0;i<arr.length;i++){
 oli = document.createElement("li");
 oul.appendChild(oli);
 oli.innerHTML = arr[i];
 }
 
 //先获取到所有的li,为下面的应用css样式做铺垫
 var oli = oul.getElementsByTagName("li");
 
 var timer;//这里先定义一个变量,开启定时器再赋值,
 //为鼠标注册点击事件
 my$("btn").onclick=function (){
  clearInterval(timer);//在开启定时器之前先清除定时器,避免出现用户多次点击开启多个定时器而关不掉。
  //开启定时器并赋值给变量
  timer = setInterval(function (){
  var num = parseInt(Math.random()*arr.length);
  console.log(num);
  //这里遍历所有的li元素,在开启定时器之前先把所有的li的样式清除掉
  //如果这里不清除,那么所有的li在下一步都会全部应用上css样式,
  //全部都会高亮显示,无法实现排他效果
  for(var i=0;i<oli.length;i++){
   oli[i].className = "";
  }
  oli[num].className = "cor";
  //将生成的随机数动态显示到span中,将最后所选择的数组名显示到span中
  my$("pp").innerHTML = arr[num];
  //console.log(arr[num]);
  },100);
 }
 //停止点名按钮。
 my$("btn2").onclick=function (){
  clearInterval(timer);
 }
 
</script>

上述就是小编为大家分享的使用JavaScript怎么实现一个课堂随机点名系统了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. JavaScript如何实现随机点名程序
  2. JavaScript实现随机点名器

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:怎么在Javaweb中统计在线人数

下一篇:怎么在微信小程序中实现一个星级评价功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》