娱乐小项目，做教学上课随机抽人用，因为班级较多，所以不想用数组的方式来进行存储，将excel表格的数据直接转换为JSON对象格式，再循环存入数组，通过数组下标随机数的方式，实现这样的一个效果。
HTML代码
<body>
<input type="file" id="excel-file">
<div id="interface">
<div id="nameDisplay">随机点名器</div>
<button onclick="clickButton(this)">开始</button>
</div>
</body>
CSS代码
<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>
<style>
div,
button {
margin: 0px;
padding: 0px;
}
#interface {
width: 400px;
height: 300px;
background-color: aqua;
border-radius: 10%;
position: relative;
margin: 100px auto;
}
#nameDisplay {
/*大小，形状*/
width: 300px;
height: 100px;
background-color: aquamarine;
border-radius: 10%;
/*位置*/
position: absolute;
top: 50px;
left: 50px;
/*文本设置*/
font-size: 30px;
text-align: center;
line-height: 100px;
overflow: hidden;
}
button {
width: 100px;
height: 50px;
border-radius: 10%;
background-color: palegreen;
position: absolute;
bottom: 50px;
left: 150px;
font-size: 20px;
text-align: center;
line-height: 50px;
}
</style>
JS代码
<script>
var names = [];
var arr = [];
// var length = names.length;
var length;
//获取显示姓名的div对象
var displayBoard = document.getElementById("nameDisplay");
mytime = null
//点击开始，按钮变成停止字样、改变颜色，轮放姓名，点击停止，按钮变字和颜色，停止
function clickButton(btn) {
//获取按钮上的文字
var text = btn.innerHTML;
console.log(text);
//如果是开始按钮
if (text == "开始") {
btn.innerHTML = "结束";
btn.style.backgroundColor = "yellow";
if (mytime == null) {
mytime = setInterval(function () {
var name = randomName();
console.log(name);
//轮放名字
displayBoard.innerHTML = name;
}, 100);
}
} else if (text == "结束") {
btn.innerHTML = "开始";
btn.style.backgroundColor = "palegreen";
if (mytime != null) {
clearInterval(mytime);
mytime = null;
}
}
}
function randomName() {
// alert(names);
// arr = names[0]['姓名'];
// arr = names[1]['姓名'];
for (var i = 0; i < names.length; i++) {
arr.push(names[i]['姓名']) + ',';
}
console.log(arr);
length = arr.length;
var randomNum = Math.ceil(Math.random() * 10) % length + 1;
// alert(randomNum);
return arr[randomNum - 1];
}
//给input标签绑定change事件，一上传选中的.xls文件就会触发该函数
$('#excel-file').change(function (e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function (ev) {
try {
var data = ev.target.result
var workbook = XLSX.read(data, {
type: 'binary'
}) // 以二进制流方式读取得到整份excel表格对象
// 存储获取到的数据
// var persons = [];
} catch (e) {
console.log('文件类型不正确');
return;
}
// 表格的表格范围，可用于判断表头是否数量是否正确
var fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
// console.log(fromTo);
names = names.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一张表，就取消注释这行
}
}
//在控制台打印出来表格中的数据
// console.log(persons);
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
</script>
全部代码
嫌麻烦直接copy用就完事了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<style>
div,
button {
margin: 0px;
padding: 0px;
}
#interface {
width: 400px;
height: 300px;
background-color: aqua;
border-radius: 10%;
position: relative;
margin: 100px auto;
}
#nameDisplay {
/*大小，形状*/
width: 300px;
height: 100px;
background-color: aquamarine;
border-radius: 10%;
/*位置*/
position: absolute;
top: 50px;
left: 50px;
/*文本设置*/
font-size: 30px;
text-align: center;
line-height: 100px;
overflow: hidden;
}
button {
width: 100px;
height: 50px;
border-radius: 10%;
background-color: palegreen;
position: absolute;
bottom: 50px;
left: 150px;
font-size: 20px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<input type="file" id="excel-file">
<div id="interface">
<div id="nameDisplay">随机点名器</div>
<button onclick="clickButton(this)">开始</button>
</div>
</body>
<script>
var names = [];
var arr = [];
// var length = names.length;
var length;
//获取显示姓名的div对象
var displayBoard = document.getElementById("nameDisplay");
mytime = null
//点击开始，按钮变成停止字样、改变颜色，轮放姓名，点击停止，按钮变字和颜色，停止
function clickButton(btn) {
//获取按钮上的文字
var text = btn.innerHTML;
console.log(text);
//如果是开始按钮
if (text == "开始") {
btn.innerHTML = "结束";
btn.style.backgroundColor = "yellow";
if (mytime == null) {
mytime = setInterval(function () {
var name = randomName();
console.log(name);
//轮放名字
displayBoard.innerHTML = name;
}, 100);
}
} else if (text == "结束") {
btn.innerHTML = "开始";
btn.style.backgroundColor = "palegreen";
if (mytime != null) {
clearInterval(mytime);
mytime = null;
}
}
}
function randomName() {
// alert(names);
// arr = names[0]['姓名'];
// arr = names[1]['姓名'];
for (var i = 0; i < names.length; i++) {
arr.push(names[i]['姓名']) + ',';
}
console.log(arr);
length = arr.length;
var randomNum = Math.ceil(Math.random() * 10) % length + 1;
// alert(randomNum);
return arr[randomNum - 1];
}
//给input标签绑定change事件，一上传选中的.xls文件就会触发该函数
$('#excel-file').change(function (e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.onload = function (ev) {
try {
var data = ev.target.result
var workbook = XLSX.read(data, {
type: 'binary'
}) // 以二进制流方式读取得到整份excel表格对象
// 存储获取到的数据
// var persons = [];
} catch (e) {
console.log('文件类型不正确');
return;
}
// 表格的表格范围，可用于判断表头是否数量是否正确
var fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
// console.log(fromTo);
names = names.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
// break; // 如果只取第一张表，就取消注释这行
}
}
//在控制台打印出来表格中的数据
// console.log(persons);
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
</script>
</html>
excel表格数据
实现效果
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
