如何使用原生Js实现随机点名详解


Posted in Javascript onJanuary 06, 2021

使用原生Js实现随机点名

最近学了一点前端内容,老师让用js设计一个班里的随机点名器。就尝试写了一个,具体实现效果如图:

如何使用原生Js实现随机点名详解

实现代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点名</title>
  <link href="../callTheRoll/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">

</head>
<style>
  div {
    float: left;
  }
  
  button {
    background-color: moccasin;
    margin: 30px;
    height: 50px;
    width: 150px;
    border: rgb(245, 165, 165) 1px solid;
    font-size: 18px;
  }
  
  .wai {
    margin-left: 200px;
    width: 1300px;
  }
  
  .name {
    height: 40px;
    width: 100px;
    margin: 4px;
    padding: 10px;
    font-size: 18px;
    background-color: mistyrose;
  }
</style>

<!-- onload : 事件会在页面或图像加载完成后立即发生。 -->
<body onload="A()">
  <div class="wai" align="center">
    <table>
      <button class="start" onclick="start()">开始</button>
      <button class="end" onclick="end()">结束</button>
    </table>
    <div id="names"></div>
  </div>

  <script type="text/javascript">
    var nameArr = [
      "空", "张家家", "许雪雪", "王橘橘", "陈韵", "马本本", "张志志", "唐豪豪", "高洋洋", "朱阳阳", "王山山", "空",
      "尹方方", "王零零", "李远远", "吴杰", "李玉玉", "李雯雯", "步一一", "崔明明", "肖金金", "陈晴晴", "赵飞飞", "空",
      "李英英", "李洋阳", "刘俊郡", "王泊", "廉云云", "王子俊", "康三三", "李浩浩", "张艺艺", "徐叶叶", "李宏宏", "雷康康",
      "张青青", "王乐乐", "空", "杨童童", "张君君", "孙明", "何龙龙", "郑轩轩", "任平平", "孙超超", "空", "贺涛涛",
      "空", "空", "空", "空", "熊秀秀", "薄嘉嘉", "薛万万", "尹飞", "张杰", "胡万万", "空", "马文文"
    ];
    var index = 0;
    var k = 1; // 记录不为空的座位

    // 生成作为表
    function A() {
      for (var i = 0; i < nameArr.length; i++) {
        if (nameArr[i].length > 1) {
          // 创建div标签(html元素)
          var div = document.createElement("div");
          div.setAttribute("class", "name");
          div.setAttribute("id", index++ + "");
          var text = document.createTextNode(nameArr[i]);
          div.appendChild(text);
          // 添加元素
          document.getElementById("names").appendChild(div);

          // 每排12人,所以每隔12,添加一个换行符
          if ((i + 1) % 12 == 0) {
            var br = document.createElement("br");
            document.getElementById("names").appendChild(br);
          }
          k++; // 添加一个学生,k自增1,记录学生(不为空的座位)个数
        } else {
          var div = document.createElement("div");
          div.setAttribute("class", "name");

          // div.setAttribute("id", index++ + "");
          // 如果当前元素长度小于等于1时,则代表当前座位为空,所以不给当前div添加id属性,方便后续随机选人时,避开空座位

          var text = document.createTextNode(nameArr[i]);
          div.appendChild(text);
          // 添加元素
          document.getElementById("names").appendChild(div);
          if ((i + 1) % 12 == 0) {
            var br = document.createElement("br");
            document.getElementById("names").appendChild(br);
          }
        }

      }
    }

    // 定义一个id标志
    var index2 = -1;

    function restore() {
      // 还原颜色
      if (index2 != -1) {
        document.getElementById(index2 + "").style.cssText = "background: mistyrose";
      }
      // 生成随机数,用K生成随机数,此时K代表不为空的作为个数
      var num = Math.floor(Math.random() * k);
      document.getElementById(num + "").style.cssText = "background-color:red";
      index2 = num; // 记录当前被选中的id,在下次执行该函数时,将颜色还原
    }

    var time; // 用于接收计时器,方便关计时器时操作
    var n = 1; // 定义状态正在执行 n=0 , 已经结束 n=1

    function start() {
      if (n == 1) {
        // DOM setInterval()方法 计时器
        time = setInterval("restore()", 80);
        n = 0;
      }
    }

    function end() {
      if (n == 0) {
        clearInterval(time);
        alert("请" + document.getElementById(index2 + "").innerHTML + "同学回答问题");
        n = 1;
      }
    }
  </script>
</body>

</html>

在这里对计时器做一下介绍:

setInterval(code,millisec),这两个参数都是必须的;
			第一个参数是要调用的函数或要执行的代码串。
			第二个参数是毫秒值,表示的是隔多久执行一次code(参数一)。
	clearInterval(id_of_setinterval),参数是必须的;
			这个参数表示setInterval返回的ID值,即在代码中我设置的time

(本人是小白一个,所以写的有什么问题也请各位指出,可以让我及时改正,谢谢)

总结

到此这篇关于如何使用原生Js实现随机点名的文章就介绍到这了,更多相关原生Js实现随机点名内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
记录vue项目中遇到的一点小问题
May 14 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 #Javascript
JavaScript 中的六种循环方法
Jan 06 #Javascript
JavaScript的一些小技巧分享
Jan 06 #Javascript
详解Vue2的diff算法
Jan 06 #Vue.js
如何利用JavaScript编写一个格斗小游戏
Jan 06 #Javascript
vuex的使用步骤
Jan 06 #Vue.js
一篇文章看懂JavaScript中的回调
Jan 05 #Javascript
You might like
10 个经典PHP函数
2013/10/17 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP7新增函数
2021/03/09 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
django model去掉unique_together报错的解决方案
2016/10/18 Python
python让列表倒序输出的实例
2018/06/25 Python
详解Django中间件执行顺序
2018/07/16 Python
Python合并多个Excel数据的方法
2018/07/16 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python