js实现课堂随机点名系统

 更新时间:2019年11月21日 08:45:55   作者:一名正在努力的前端小白  
这篇文章主要介绍了js实现课堂随机点名系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js随机点名系统的具体代码,供大家参考,具体内容如下

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">
 <h1 style="text-align:center">点名系统</h1>
 <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>

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

相关文章

  • 限制只能输入数字的实现代码

    限制只能输入数字的实现代码

    下面小编就为大家带来一篇限制只能输入数字的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • JS如何使用剪贴板操作Clipboard API

    JS如何使用剪贴板操作Clipboard API

    浏览器允许JavaScript脚本读写剪贴板,自动复制或粘贴内容。一般来说,脚本不应该改动用户的剪贴板,以免不符合用户的预期。但是,有些时候这样做确实能够带来方便,比如"一键复制"功能,用户点击一下按钮,指定的内容就自动进入剪贴板。本文将介绍3种方法来实现。
    2021-05-05
  • JavaScript中apply方法的应用技巧小结

    JavaScript中apply方法的应用技巧小结

    这篇文章给大家总结了在js中apply方法的一些应用技巧,通过这些技巧对大家日常的使用相信会有帮助,有需要的朋友们下面来一起看看吧。
    2016-09-09
  • JavaScript实现区块链

    JavaScript实现区块链

    很多朋友都听说过比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术,接下来通过本文给大家介绍用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的,感兴趣的朋友一起看看吧
    2018-03-03
  • JavaScript时间与时间戳的转换操作实例分析

    JavaScript时间与时间戳的转换操作实例分析

    这篇文章主要介绍了JavaScript时间与时间戳的转换操作,结合实例形式分析了javascript日期与时间戳转换相关函数与操作技巧,需要的朋友可以参考下
    2018-12-12
  • js 失去焦点时关闭层实现代码

    js 失去焦点时关闭层实现代码

    失去焦点时关闭层实现代码。大家可以参考下。
    2009-05-05
  • javascript设计模式之module(模块)模式

    javascript设计模式之module(模块)模式

    这篇文章主要为大家详细介绍了javascript设计模式之module(模块)模式 ,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • webpack文件打包错误异常

    webpack文件打包错误异常

    这篇文章主要介绍了webpack文件打包错误异常,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • 用Javascript轻松制作一套简单的抽奖系统

    用Javascript轻松制作一套简单的抽奖系统

    用Javascript轻松制作一套简单的抽奖系统...
    2006-12-12
  • js常用代码段整理

    js常用代码段整理

    以下是平时收集的几个常用代码段,大多数是从网上搜集而来。也均为未找到是谁谁原创,是否允许转载等要求, 所以如果看到的朋友发现其中有些代码是自己写的,还请原谅在下转帖出来
    2011-11-11

最新评论