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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
javascript学习之json入门
Dec 22 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
vue如何截取字符串
May 06 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
用PHP4访问Oracle815
2006/10/09 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript 写类方式之七
2009/07/05 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
javascript数组排序汇总
2015/07/07 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Python合并字符串的3种方法
2015/05/21 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python先序遍历二叉树问题
2017/11/10 Python
python图书管理系统
2020/04/05 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
python仿抖音表白神器
2019/04/08 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
餐饮业创业计划书范文
2014/01/06 职场文书
个人作风建设自查报告
2014/10/22 职场文书
毕业生见习报告总结
2014/11/08 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
oracle重置序列从0开始递增1
2022/02/28 Oracle