一个的简单随机抽查页面
作者：互联网
前言
写这个小东西主要是为了应付辅导员要求，抽查大家课程完成情况，课程分工自行私聊商量，以抽查形式通过后台数据了解同学们签到情况、视频进度情况、作业完成情况 ，将抽查的情况描述写入表格.
天呐，上网课已经很疲了，还要这个样子检查进度，真的是…
废话不多说了，先看要求
要求
情况都是文字描述，比如x月x日周x，抽查了xxx、xx、xxx、xxx、xxx、xx、xx共X人 【注意：姓名按照学号顺序罗列，每门课抽查每周不少于8/10人的学习数据，负责4门课的学委每门课抽查不少于8人，负责3门课的班长每门课抽查不少于10人，自己负责的几门课抽查轮开人，这样基本每个人一周最少两门课分别会被班长和学委查中】
分析
自己人工进行抽查，肯定不太好，费神又费脑，所以就来写一个简单的随机抽查页面吧，保证公平公正。
- 首先，第一个先到的就是自己最近学了的ssm框架，做一个前后端交互式的，连接上数据库，里面存放班级人员信息，id，学号，姓名，但是目前的情况（大二了），写出来的这个东西只能在自己电脑上用，给了别人他们连运行环境都莫得，虽然可以通过电脑ip地址来访问，但是，ip地址还是不要随便传出去的好，所以pass。
- 然后，就想到了简单的一个小c、c++、或者java程序，但是这个界面是真的丑，java都还莫得.exe文件，不能直接使用(想的比较远，目的是让完全不会编程的人也能用，嘿嘿)pass掉。
- 最后，就是一个单纯的页面了。html，css，JavaScript，jquery来一波简单小操作，话不多说了，上代码吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1829抽查小页面</title>
<style type="text/css">
/*为了稍微好看一点，引用了一下别人的样式*/
body{
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
h1{
color: wheat;
}
#div01{
margin-top: 100px;
margin-left: 400px;
}
#num{
font-size:16px;
border:solid 1px #b8b8b8;
width: 500px;
height: 40px;
border-radius: 3px;
}
#num:focus{
border-color: blueviolet;
}
#select{
width: 250px;
height: 40px;
border-width: 0px;
border-radius: 3px;
background: #1E90FF;
cursor: pointer;
font-family: Microsoft YaHei;
color: white;
font-size: 17px;
}
select:hover {
background: #5599FF;
}
#showdiv{
margin-left: 400px;
border: solid 2px #ccc;
height: 400px;
width: 755px;
color: white;
font-size: 30px;
}
</style>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取查找数组
function selectNum(num,total){
// 存储不重复的随机数字
var arr = [];
for(var i = 0 ; i < num ; i++){
// 创建一个随机数
var rnd = Math.floor(Math.random()*total);
// 检查是否重复
if(checkInArr(arr, rnd)){
i--;
}else{
arr.push(rnd);
}
}
return arr;
}
// 检查数组内是否重复
function checkInArr(arr,rnd){
for(var i = 0; i < arr.length; i++){
if(rnd === arr[i]){
return true;
}
}
return false;
}
//位置数组数组排序
function mysort(a,b){
return a-b;
}
//输出结果到表格
function flushStu(){
var date=new Date();
var month=date.getMonth()+1
var day=date.getDate();
var week=date.getDay();
var weekday = [ "日", "一", "二", "三", "四", "五", "六" ];
var msg=month+"月"+day+"日周"+weekday[week]+"，抽查了";
$("#showdiv").html(msg);
//建立班级信息
var stu=["一","二","三","四","五","六","七","八","九","十"];
//获取抽查人数
var num=$("#num").val();
var count=selectNum(num,stu.length).sort(mysort);
for(var i=0;i<count.length;i++){
var temp=count[i];
if(i!=count.length-1){
$("#showdiv").html($("#showdiv").html()+stu[temp]+"、");
}else{
$("#showdiv").html($("#showdiv").html()+stu[temp]+"共"+num+"人");
}
}
}
</script>
</head>
<body>
<h1 align="center">1829班抽查</h1>
<div id="div01">
<input type="text" id="num" placeholder="抽查人数(不要超过你自己设置的人数)"/>
<input type="button" id="select" value="抽取" onclick="flushStu();" />
</div>
<div id="showdiv">
</div>
</body>
</html>
后记
要用得到友友，记得引入jQuery文件哦。这只是一个为了应付学校要求的小任务而写的，但是写完以后还是非常开心的，自己学的东西真的可以用到，感觉非常的开心。
不足
当然这个东西也有不足，就比如我们的要求，随机抽查大家，但是这个页面每一次查询，都是新的开始。不会存储到一些查询到的数据，所以按照要求，会有不少人被查到4门甚至5门，但是也有人会干脆1门都没有╮(╯_╰)╭，这个就真滴烦了，没办法了，就直接自己进行宏观调控了…
标签：arr,抽查,num,随机,background,var,页面,255 来源： https://blog.csdn.net/qq_45803593/article/details/104709185