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 相关文章推荐
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
如何实现js拖拽效果及原理解析
May 08 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中实现图片的锐化
2006/10/09 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
php获取linux命令结果的实例
2017/03/13 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
中止javascript执行的方法
2014/02/14 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
python写日志封装类实例
2015/06/28 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
什么是serialVersionUID
2016/03/04 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
大学生就业自我鉴定
2013/10/26 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
法律专业实习鉴定
2013/12/22 职场文书
就业自我评价
2014/02/04 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
学校评语大全
2014/05/06 职场文书
安全生产标语
2014/06/06 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书