js实现课堂随机点名系统


Posted in Javascript onNovember 21, 2019

本文实例为大家分享了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>

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

Javascript 相关文章推荐
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
JavaScript实现简单随机点名器
Nov 21 #Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 #Javascript
Vue实现按钮级权限方案
Nov 21 #Javascript
微信小程序实现星级评价
Nov 20 #Javascript
微信小程序音乐播放器开发
Nov 20 #Javascript
微信小程序实现音乐播放器
Nov 20 #Javascript
vue移动端模态框(可传参)的实现
Nov 20 #Javascript
You might like
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
JS 建立对象的方法
2007/04/21 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
查看Django和flask版本的方法
2018/05/14 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Python如何执行系统命令
2020/09/23 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
党员个人承诺书
2015/04/27 职场文书
建国大业观后感600字
2015/06/01 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
干部考核工作总结2015
2015/07/24 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
思想工作总结范文
2015/08/12 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
volatile保证可见性及重排序方法
2022/08/05 Java/Android