如何使用原生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 相关文章推荐
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
详解微信小程序「渲染层网络层错误」的解决方法
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删除xml文档内容的方法
2015/01/23 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
JavaScript中this用法学习笔记
2019/03/17 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
从零学Python之hello world
2014/05/21 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
python如何更新包
2020/06/11 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
怎么写自荐书范文
2014/02/12 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
雷锋的故事观后感
2015/06/10 职场文书
python 模块重载的五种方法
2021/04/24 Python
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers