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代码
Dec 01 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue params、query传参使用详解
Sep 12 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
php判断变量类型常用方法
2012/04/24 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
简单了解Python生成器是什么
2019/07/02 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
java程序员面试交流
2012/11/29 面试题
半年思想汇报
2013/12/30 职场文书
餐饮加盟计划书
2014/01/10 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
食品安全演讲稿
2014/09/01 职场文书
乌镇导游词
2015/02/02 职场文书
学子宴致辞大全
2015/07/27 职场文书
会议室使用管理制度
2015/08/06 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers