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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
jquery uaMatch源代码
Feb 14 Javascript
javascript的console.log()用法小结
May 31 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
uniapp实现可滑动选项卡
Oct 21 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数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP基本语法总结
2014/09/06 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python面向对象之Web静态服务器
2019/09/03 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
小兵张嘎观后感300字
2015/06/03 职场文书
儿子满月酒致辞
2015/07/29 职场文书
详解Python flask的前后端交互
2022/03/31 Python