使用原生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=1function 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实现随机点名项目
核心思想随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 Math.random() * num: 产生从0到num的随机数 Math.floor(): 向下取整 ...
原生JavaScript实现随机点名
原生JavaScript实现随机点名一,HTML代码 <div id="center"><div id="showname">O_O ...
matlab运用函数随机点名,js实现随机点名功能
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下效果: PS:在原来的效果中很快的,但是不知怎么的录下来就变得这么慢了代码如下: 随机点名 .box{ width: 800 ...
原生JS开箱随机抽奖代码
下载地址原生JS制作开箱随机抽奖小游戏,思路比较简单,十分实用!您可以随意定制抽奖奖品,点击开启按钮,箱子筛选随机产生中奖结果弹窗提示.ps:演示内容无任何含义. dd:
原生js实现随机雪花落下特效
原生js随机生成不同数量.速度不同的雪花从屏幕上方落下,可修改各种配置生成自己的雪花特效. var snowStatus = false; var snow1 = './images/snow1.pn ...
【JS】随机点名小案例
一.html <h2>随机点名</h2><div class="box"><span>名字是:</span><di ...
html中自动随机点名的程序,JavaScript实现随机点名程序
本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下效果: 录制的gif效果图没那么理想,其实速度是比这个快的思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时 ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
HTML+CSS+JS实现网页随机点名
HTML+CSS+JS实现网页随机点名大家好,我是小王,一个很喜欢Coding的小女孩. 很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源! 效果如下: 部分代码如下: < ...

使用原生Js实现随机点名

使用原生Js实现随机点名

使用原生Js实现随机点名相关推荐

最新文章

热门文章