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 相关文章推荐
DOM精简教程
Oct 03 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
js实现网页定位导航功能
Mar 07 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
vue模块移动组件的实现示例
May 20 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
实用函数10
2007/11/08 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
js实现旋转木马效果
2017/03/17 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
python 合并文件的具体实例
2013/08/08 Python
python之yield表达式学习
2014/09/02 Python
Python中操作MySQL入门实例
2015/02/08 Python
Django 使用logging打印日志的实例
2018/04/28 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
用python绘制樱花树
2020/10/09 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
Linux文件系统类型
2012/02/15 面试题
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
2014年党课学习材料
2014/05/11 职场文书
某某同志考察材料
2014/05/28 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2014年项目工作总结
2014/11/24 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android