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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php和asp语法上的区别总结
2019/05/12 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
easyui validatebox验证
2016/04/29 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
React中的render何时执行过程
2018/04/13 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python实现栈的方法
2015/05/26 Python
Djang中静态文件配置方法
2015/07/30 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
详解Python中的type和object
2018/08/15 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
python多线程与多进程及其区别详解
2019/08/08 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
永不妥协观后感
2015/06/10 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
java版 联机五子棋游戏
2022/05/04 Java/Android
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers