如何使用原生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之ESC(第二类混淆)
May 06 Javascript
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
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
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
学术会议主持词
2014/03/17 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
植树节口号
2014/06/21 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
市场营销计划书
2015/01/17 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
HTML常用标签超详细整理
2022/03/19 HTML / CSS