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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
JavaScript设计模式初探
Jan 07 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
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中实现记住密码自动登录的代码
2011/03/02 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
简单了解Python write writelines区别
2020/02/27 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
关于礼仪的演讲稿
2014/01/04 职场文书
学徒工职责
2014/03/06 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
工作检讨书范文
2015/01/23 职场文书
主婚人致辞精选
2015/07/28 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫