js实现随机点名器精简版


Posted in Javascript onJune 29, 2020

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

此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进。

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>随机点名生成</title>

 <style>
  /* 页面css样式 */
  .wrapper {
   width: 800px;
   margin: 100px auto;
   border: 1px solid #ddd;
   text-align: center;
  }

  .box li {
   vertical-align: top;
   display: inline-block;
   width: 100px;
   height: 50px;
   border: 2px solid #ddd;
   border-radius: 15px;
   text-align: center;
   line-height: 50px;
   margin: 5px;
  }
  
  .wrapper button {
   border: none;
   width: 100px;
   height: 50px;
   border-radius: 10px;
   cursor: pointer;
   outline: none;
   margin-top: 20px;
   font-weight: bolder;
   color: #333;
   background-color: rgb(14, 146, 43);
  }

  .wrapper button {
   display: inline-block;
  }

  body {
   background-color: #eee;
  }
 </style>

</head>

<body>
 <div class="wrapper">
  <h1 align="center">随机点名系统</h2>
  //实时显示系统时间标签
  <h6 id="data" align="right"></h6>
  <ul class="box"></ul>
  <button class="start">开始</button>
  <button class="stop">停止</button>
 </div>
</body>

<script>
 //定义全局变量方便引用
 var boxUl = document.getElementsByClassName('box')[0];
 var start = document.getElementsByClassName('start')[0];
 var stop = document.getElementsByClassName('stop')[0]
 var oLi = document.getElementsByTagName('li');

 //数据准备
 var nameString = new String("张三,李四,王五,赵六,周七,田八,国九,归零,张3,李4,王5,赵6,周7,田8,国9,归0");
 var nameArr = nameString.split(",");

 //获取每个学生姓名添加到标签中,自动解析html标签
 var str = "";
 for (let i = 0; i < nameArr.length; i++) {
  str += "<li >" + nameArr[i] + "</li>"
 }
 boxUl.innerHTML = str;

 //添加开始按钮的点击事件
 var timer = null;
 start.onclick = function () {
  // 设置定时器
  timer = setInterval(function () {

   // 根据数组长度范围生成随机数
   var i = Math.floor(Math.random() * nameArr.length);
   // 先通过for循环清空所有style属性
   for (var j = 0; j < oLi.length; j++) {
    oLi[j].removeAttribute("style");
   }
   // 为随机选择的li颜色属性
   oLi[i].style.background = "red";
  }, 150);
 };
 // 点击停止
 stop.onclick = function () {
  // 清空定时器停止点名
  clearInterval(timer);
 }
 //页面初始化时间设置
 window.onload = function () {
  datatime();
 }
 //页面时间动态刷新
 setInterval(datatime, 1000);

 function datatime() {
  let data = new Date();
  let dataString ="现在是北京时间:" + data.toLocaleString();
  document.getElementById("data").innerHTML = dataString;
 }
</script>

附一张效果图

js实现随机点名器精简版

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

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
javascript中常用编程知识
Apr 08 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
原生js的数组除重复简单实例
May 24 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 #Javascript
在Vue中使用antv的示例代码
Jun 29 #Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 #Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 #Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 #Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 #Javascript
详解小程序横屏方案对比
Jun 28 #Javascript
You might like
php实现递归与无限分类的方法
2015/02/16 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Python 移动光标位置的方法
2019/01/20 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
信号生成及DFT的python实现方式
2020/02/25 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
python爬取天气数据的实例详解
2020/11/20 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
自我鉴定书范文
2013/10/02 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
双方协议书
2014/04/22 职场文书
作文批改评语大全
2014/04/23 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
大学感恩节活动总结
2015/05/05 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS