您的位置：首页 > Web前端 > JavaScript

纯js实现随机点名案例

2020-06-28 05:00 162 查看

纯js实现随机点名案例

页面参考

未加载Excel名单表

加载Excel表

开始启动

停止

流程图

代码编写

导入js库

js-xlsx

由SheetJS出品的
```
js-xlsx
```
是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持
```
xls
```
、
```
xlsx
```
、
```
ods
```
(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以
```
xlsx
```
格式为例。

下载地址：

jquery官网下载地址：https://jquery.com/download/
js-xlsx：https://github.com/SheetJS/js-xlsx

代码实现

<!DOCTYPE html>
<html>

<head>
<title>js读取Excel文件</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
table td {
border: 1px solid black;
width: 70px;
text-align: center;
}
</style>
</head>

<body class="Body noover">
<h4>上传你要生成名单Excel表</h4>
<input type="file" id="file" /><br>
<br>
<button id="createList">点击生成</button>

<!-- 名单表div -->

<div style="width: 800px; height: 600px;  margin-left: 350px; margin-top: -100px;">
<h3 style="text-align: center;">点名系统</h3>
<div>
<table id="roster" cellspacing="20">
<!-- 生成的名单内容 -->
</table>
</div>
</div>

<!-- 按钮div -->
<div style="float: right; margin-top: -600px; margin-right: 100px;">
<button disabled="true" id="start">开始</button>
<button disabled="true" id="stop">停止</button>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/xieyongbin/xlsx.full.min.js"></script>
<script type="text/javascript">

//定义一个名字数组，用来存放从Excel表中获取的名字数据
var names = [];
//循环定时器的唯一标识
var timerFor;
//一次性定时器唯一标识
var timerOnce;

//文件上传框改变事件 e：代表改变事件
$("#file").change(function (e) {

//从事件中获取到input元素
let input = e.target;
//获取input元素中的files属性，获取上传的文件，返回的是一个文件数组
let files = input.files;

//判断文件数据中是否有数据
if (files.length == 0) {
//没有数据，提示用户
alert("请选择要上传的文件");
return;
}
//因为我们一次只上传一个Excel文件，所有获取数组的0索引，就能获取上传的文件
let file = files[0];

//获取上传文件的名字
let fileName = file.name;
//截取字符串，获取上传文件的后缀名
let subStr = fileName.substring(fileName.indexOf(".") + 1);
//判断后缀名是否为xlsx类型
if (subStr != "xlsx") {
alert("上传文件只能为.xlsx类型的Excel表！");
return;
}

//创建文件读取对象
var reader = new FileReader();

//按字节读取文件内容，结果为文件的二进制串格式,读取到的数据储存reader对象的result属性中
reader.readAsBinaryString(file);

//读取成功时调用的事件， e代表的就是一个event，也就是一个事件，读取文件的整个过程就是一个事件，可以在此对象中获取读取到的数据
reader.onload = function (e) {
//获取对象中读取到的数据，this代表reader对象
let data = this.result;
//使用xlsx工具库将获取的禁止数据解析为excel格式,参数1：要解析的数据， 参数二：指定什么格式读取。
//返回一个工作簿对象
let WorkBook = XLSX.read(data, { type: "binary" });
//调用解析工作簿的函数
parseWorkBook(WorkBook);
}

})

//解析Excel工作簿函数
/*
工作簿就相当于一个笔记本(纸质)，里面包含了该笔记本的所属人，以及整个笔记本所写的数据，都在这个工作簿对象中。
而我们上传的Excel表，就相当于笔记本中的一页。
我们需要的数据，就在这一页的每个表格中。

*/
function parseWorkBook(WorkBook) {
//从工作簿对象中获取所有的Excel表
let sheets = WorkBook.Sheets;
//从所有的Excel表中获取第一个表，因为我们一次也只能上传一个Excel表
let sheet = sheets.Sheet1;
//使用XLSX.utils工具类的方法，获取表中的单元格的数据，将表格转化为json对象
let dataJ = XLSX.utils.sheet_to_json(sheet);

//遍历获取的json格式数据
for (let i = 0; i < dataJ.length; i++) {
//获取遍历出的每个元素的姓名；注意：以下的'姓名'属性，是Excel表中的第一行单元格的值如A1、B1
let name = dataJ[i].姓名;
// console.log(name);
//存入names数组
names[i] = name;
}
}

//加载名单函数
function loadNameList() {
//获取数组的长度，判断用户所上传的Excel表中是否有数据名单
if (names.length == 0) {
alert("所选名单没有可用数据！");
return;
}

//我的div大小一排最多能放9个，所以要计算生成多少个tr, 向上取整
let trNum = Math.ceil(names.length / 9);

//获取table元素
let table = document.getElementById("roster");

//定义一个索引变量，用来控制取names数组中的名字，这里不能设置为0，因为0 % 9 == 0，为了方便直接从1开始
var index = 1;

//循环生成tr
for (let i = 0; i < trNum; i++) {
//创建tr元素
let tr = document.createElement("tr");
//遍历names数组，获取每个名字
for (index; index <= names.length; index++) {
// console.log(names[index - 1]);
//创建td元素
let td = document.createElement("td");
//设置td元素的文本，因为index初始值等于1，取不到0号元素，所以这里为了获取0号索引的元素，要进行-1
td.innerText = names[index - 1];
//设置td元素的id
td.setAttribute("id", index);
//将td元素挂载到tr元素中
tr.appendChild(td);

//判断index是不是9的倍数，因为一行只能放9个td，如果是9的倍数的时候，就要换行
if (index % 9 == 0) {
//取余弹出后，index要加1，索引指向的元素要往后移动一位
index++;
//跳出循环
break;
}

}
//将tr挂载到table中
table.appendChild(tr);
}

//显示加载完成后，清空文件input框所选内容
document.getElementById("file").value = "";
}

//点击生成按钮的单击事件
$("#createList").click(function () {

//清空表格数据
$("#roster").html("");

//调用加载名单函数
loadNameList();

//开始按钮可用，停止按钮不可用
document.getElementById("start").disabled = false;
document.getElementById("stop").disabled = true;
});

//开始按钮单击事件
$("#start").click(function () {

//开始按钮不可用，停止按钮可用
document.getElementById("start").disabled = true;
document.getElementById("stop").disabled = false;

//清空表格数据
$("#roster").html("");

//调用重新加载名单函数
loadNameList();

//创建循环定时器(上色)
timerFor = window.setInterval(function () {
//获取随机的id数，参数为名字数组的长度
let id = randomId(names.length);
//根据随机的id，获取相应的元素
$("#" + id).css("background", "red");

//创建一次性定时器(清除色),在上完色1秒后清除颜色
timerOnce = window.setTimeout(function () {
$("#" + id).css("background", "white");
}, 100);

}, 100);
//两个定时器互不干扰，你该上色上色，我在你上完色之后等待一定时间，该清除就清除！

});

//生成[1,max]范围的整数，用于匹配每个td的id值
function randomId(max) {
return Math.ceil(Math.random() * max);
}

//创建停止按钮单击事件
$("#stop").click(function () {

//开始按钮可用，停止按钮不可用
document.getElementById("start").disabled = false;
document.getElementById("stop").disabled = true;

//使用定时器的唯一标识，清除循环定时器。
window.clearInterval(timerFor);
window.clearTimeout(timerOnce);
});
</script>

</html>

注意事项

对于要导入的Excel有要求
在编写的课程中可以将获取到的工作簿对象，Excel表对象使用
```
console.log()
```
输出查看

结束

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航