如何使用原生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获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
javascript获取元素的计算样式
May 24 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
农林环境专业求职信
2014/03/13 职场文书
关于读书的演讲稿
2014/05/07 职场文书
2014年国庆节寄语
2014/09/19 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python