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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 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
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
require.js的用法详解
2015/10/20 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python爬取个性签名的方法
2018/06/17 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
让生命充满爱演讲稿
2014/05/10 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
布达拉宫的导游词
2015/02/02 职场文书
合同审查法律意见书
2015/06/04 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js