如何使用原生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(新增,删除相关列信息)
May 23 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
JavaScript实现页面动态验证码的实现示例
Mar 23 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
使用angular写一个hello world
2015/01/23 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python 实现矩阵填充0的例子
2019/11/29 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
高中打架检讨书
2014/02/13 职场文书
党员干部一句话承诺
2014/05/30 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL