快开学了吧？作为课代表或者班长的你肯定需要一个随机点名系统。所以我做了一个可以通过导入Excel录入学生信息的随机点名系统。真的方便好用！！！

一、如何使用

点名系统的使用和 把大象放进冰箱的步骤类似，也分为三步：

1.下载模板

注意要严格按照Excel所示录入学生的数据。

如果你比较叛逆，把学生的姓名弄到了其它列，出了问题那可不管我的事~

2.导入数据

看到显示了多少名学生后，就表示导入成功了！

3.开始点名

开始点名呀，还愣着干嘛？

二、一些小心机

说实话，我上学那会儿，最怕老师点名。
每次老师点名让回答问题，我心律必超过180/min，我记得上次我心跳这么快，还是在老师点名的时候。

那时候就想如果我会魔法，我第一件事情做的事就是把我的名字从花名册上扣去~。

喏~现在可以实现了…

你可以通过两种方式获取作弊方法：
（1）看代码
下文有完整的代码。
（2）猜谜语
.

6IGq5piO55qE5a2p5a2Q77yM5L2g5bqU6K+l5Li+5omL5Y+R6KiA77yM5aSa5aSa6KGo546w55qE77yBCgrkvZzlvIrmlrnms5XlpoLkuIvvvIznlKjkuI3nlKjlnKjkvaDlkYDvvIEKCuWcqOS9oOWQjeWtl+WQjumdouWKoOS4iuS4gOS4quiLseaWh+eahCAhIOWwseS4jeS8mueCueWIsOS9oOS6huOAggrmr5TlpoLvvJoh6IOh5YWr5LiA

三、实现思路

1.技术

哎呀，老三板斧了：
HTML + JS + CSS

2.实现思路

（1）将Excel中的内容解析出来，并转为JSON数组。
（2）使用Math.random()产生 0 到 学生总数量 之间的随机整数。
（3）操作document，将产生的随机整数对应的JSON数组中的学生姓名，赋值给对应的元素，显示在页面上。
（4）在点击开始随机按钮后，创建一个定时器，每50毫秒产生一次 0 到 学生总数量 之间的随机整数。
（5）在点击停止按钮后，销毁对应的定时器。

3.完整代码

gitee地址

（1）HTML代码和JS代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>上课~点下名!</title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script><link rel="stylesheet" type="text/css" href="../roster/css/index.css"></head><body><div class="index_containt"><div id="data_input"><input type="button" id="enteringData" name="fileButton" value="录入数据"onclick="$('#excel-file').click();" /><input style="display: none;" type="file" id="excel-file"><input type="button" id="downTemplate" onclick="downloadTemplate()" value="下载模板" /></div><div id="show_info"><div id="student_name" style="color: aqua;"><h1 id="student_name_value">--/--</h1></div><div id="btn_container"><button id="start" disabled="true">开始随机</button><button id="end">停止</button></div><h4 id="student_number">共 <span id='student_number_value'>0</span> 位同学</h4></div></div></body>
</html>
<script>var time;var studentData = [];//给input标签绑定change事件，一上传选中的.xls文件就会触发该函数$('#excel-file').change(function(e) {var files = e.target.files;// console.log(files);//判断文件格式var fileName = files[0].name;// console.log(fileName);var suffix = fileName.split(".")[1];// console.log(suffix);if (suffix != 'xlsx' && suffix != 'xls' && suffix != 'xltx') {alert("抱歉~请放入正确的文件!");return;}var fileReader = new FileReader();fileReader.onload = function(ev) {try {var data = ev.target.resultvar workbook = XLSX.read(data, {type: 'binary'})var persons = []; } catch (e) {console.log('文件类型不正确');return;}// 表格的表格范围，可用于判断表头是否数量是否正确var fromTo = '';var studentNumbers = 0;// 遍历每张表读取for (var sheet in workbook.Sheets) {if (workbook.Sheets.hasOwnProperty(sheet)) {fromTo = workbook.Sheets[sheet]['!ref'];console.log(fromTo);persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));studentNumbers = persons.length;//检测数量if (studentNumbers <= 0) {alert("学生数量必须大于等于0!");return;}document.getElementById("student_number_value").innerText = studentNumbers;//检测列数console.log(persons.length);$('#start').attr("disabled", false);break; // 如果只取第一张表，就取消注释这行}}studentData = persons;$("#area").val(JSON.stringify(persons));};fileReader.readAsBinaryString(files[0]);});$('#start').click(function() {var studentNumber = document.getElementById("student_number_value").innerText;time = window.setInterval(function() {var index = getRandom(1, studentNumber);var name = studentData[index].姓名;if (name.indexOf("!") === -1) {document.getElementById("student_name_value").innerHTML = name;}}, 50)});//结束$("#end").click(function() {window.clearInterval(time);})//随机数function getRandom(min, max) {return Math.floor(Math.random() * (max - min)) + min;}//下载模板function downloadTemplate() {var a = document.createElement("a");a.href = "/roster/static/花名册模板.xlsx"; a.download = "花名册模板.xlsx"; a.style.display = "none"; document.body.appendChild(a); a.click(); a.remove(); }
</script>

（2）css代码

* {margin: 0;padding: 0;
}html,
body {height: 100%;height: 100%;margin: 0;padding: 0;
}body {width: 100%;height: 100%;background: url(../img/bg4.jpg) no-repeat;background-size: 100% 100%;background-attachment: fixed;z-index: 1;
}.index_containt {width: 100%;height: 100%;margin: 0 auto;
}#data_input {width: 50px;height: 120px;position: fixed;left: 0px;top: 40%;
}#enteringData {width: 50px;height: 59px;border: none;color: white;font-size: 10px;background-color: rgba(255, 255, 255, 0.4);box-shadow: 0 2px 5px rgba(20, 20, 20, 0.8);display: flex;align-items: center;top: 100px;backdrop-filter: blur(10px);transition-duration: 0.1s;
}#downTemplate {width: 50px;height: 59px;border: none;color: white;margin-top: 4px;font-size: 10px;background-color: rgba(255, 255, 255, 0.4);box-shadow: 0 2px 5px rgba(20, 20, 20, 0.8);display: flex;align-items: center;top: 100px;backdrop-filter: blur(10px);transition-duration: 0.5s;
}#data_input:active {background-color: gray;
}#downTemplate:active {background-color: gray;
}#enteringData:hover {font-weight: bold;transform: scale(1.1);
}#downTemplate:hover {font-weight: bold;transform: scale(1.1);
}#show_info {position: relative;left: 50%;width: 800px;height: 400px;left: 32%;top: 35%;background-color: rgba(255, 255, 255, 0.4);box-shadow: 0 2px 15px rgba(20, 20, 20, 0.8);border-radius: 10px;top: 100px;backdrop-filter: blur(10px);
}#excel-file {width: 50px;color: red;
}#student_name {display: flex;align-items: center;justify-content: center;width: 100%;height: 45%;font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-size: 40px;
}
#btn_container{display: flex;align-items: center;justify-content: center;width: 100%;height: 45%;
}
#student_name_value{color: aliceblue;
}
#student_number{display: flex;align-items: center;padding-left: 15px;width: 100%;height: 10%;color: aliceblue;;
}
#start,#end{width: 150px;height: 50px;background-color: #56D789;border: none;margin-right: 10px;color: aliceblue;transition-duration: 0.3s;
}
#start:hover{transform: scale(1.1);font-weight: bold;
}
#end:hover{transform: scale(1.1);font-weight: bold;
}
#start:active{transform: scale(1.1);background-color: #368254;
}
#end:active{transform: scale(1.1);background-color: #368254;
}

（3）Excel模板和背景图请导Gitee中去取

我写了个随机点名系统，非常好用~ 我给它取名叫做——随机点名系统相关推荐

广色域图片Android,ios 9.0系统App因广色域图片而导致的随机崩溃
双11终于结束了,也有了点时间写点东西了.今天说一下起几个月IOS发布过程中遇到的一个问题. App在testFlight过程中,有测试反馈,在ios9的系统中启动后操作一会就会随机崩溃.每次的崩溃栈 ...
系统架构图怎么画_基于ROS的移动机器人上层系统架构分析
看过网上不少博客,介绍ROS系统架构的,基本上都是在介绍ROS自身系统架构,很少有介绍特定机器人的系统架构的.个人觉得,入门一个系统,首先需要从整体开始把握,而不必在意细节,整体把握好了,细节自然水到 ...
win7 怎么干净删除php,window_win7系统如何删除注册表里面的垃圾文件？，win7系统如何删除注册表里面的 - phpStudy...
win7系统如何删除注册表里面的垃圾文件? win7系统如何删除注册表里面的垃圾文件?在win7系统中我们可以通过删除或修改注册表的垃圾文件,来提高系统的运行速度,但是在删除注册表过程中,如果错误修改 ...
交互系统的构建之（一）重写Makefile编译TLD系统
交互系统的构建之(一)重写Makefile编译TLD系统 zouxy09@qq.com http://blog.csdn.net/zouxy09 为了对TLD系统做一些功能的填充,例如添加语音合成来提 ...
服务器安装win7系统蓝屏,安装win7系统出现蓝屏| win7安装过程中蓝屏|安装win7系统时蓝屏...
2016-05-24 14:52:52 浏览量:991 win7系统安装显卡后出现蓝屏问题怎么办呢?其实安装显卡后出现蓝屏也是比较常见的故障问题,网上也讲解很多关于win7系统安装显卡后出现蓝屏的资讯 ...
deepin系统15.6版本安装执行那个exe文件_深度系统（Deepin Linux）U盘安装教程
深度系统(Deepin Linux)U盘安装教程同其他操作系统的安装一样,深度系统(Deepin Linux)同样可支持光盘安装.U盘安装和硬盘安装.只是目前,光盘已逐渐不再使用,组装电脑的时候光驱 ...
视频系统流媒体 rtsp hls h264 h265 aac 高并发低延时系统设计录像视频合成转发点播快进快退单步播放分布式集群
系统改名为:,升级包改使用jpg图像封装,从2.124版本开始,1.*的升级包停止使用系统工具下载地址(2019-04-19) :https://pan.baidu.com/ ...
thinkpad重装系统不引导_联想Y400电脑装WIN7无法重装系统的解决方法
1. 由于您笔记本预装的Windows8系统需要使用BIOS中的UEFI功能及GPT分区表,所以在您将系统改装为Windows7系统时,需要将随机Windows8系统的所有分区全部删除(包括Windo ...
windows同时代服务器系统,从Win95到Win10：那些年让你痴迷的系统特性大盘点
从Win95到Win10,微软桌面操作系统走过了辉煌的二十年,当年在这些系统陪伴下成长的少年和青年,也都逐渐成家立业,拥有了自己的人生.但有些记忆始终是难以磨灭的,Windows95.Windows9 ...
【信号与系统学习笔记】—— 一起走进“卷积”的世界 2【系统基本性质和卷积的关系】
文章目录一.卷积计算的基本性质二.由卷积计算的基本性质探索LTI系统结构的特点三.系统基本性质和卷积的关系 2.1 记忆性和卷积 2.2 可逆性与卷积 2.3 稳定性与卷积 2.4 因果性与卷积 ...

我写了个随机点名系统，非常好用~ 我给它取名叫做——随机点名系统