其他分享
首页 > 其他分享> > 一个的简单随机抽查页面

一个的简单随机抽查页面

作者:互联网

前言
写这个小东西主要是为了应付辅导员要求,抽查大家课程完成情况,课程分工自行私聊商量,以抽查形式通过后台数据了解同学们签到情况、视频进度情况、作业完成情况 ,将抽查的情况描述写入表格.
天呐,上网课已经很疲了,还要这个样子检查进度,真的是…
废话不多说了,先看要求
要求

情况都是文字描述,比如x月x日周x,抽查了xxx、xx、xxx、xxx、xxx、xx、xx共X人 【注意:姓名按照学号顺序罗列,每门课抽查每周不少于8/10人的学习数据,负责4门课的学委每门课抽查不少于8人,负责3门课的班长每门课抽查不少于10人,自己负责的几门课抽查轮开人,这样基本每个人一周最少两门课分别会被班长和学委查中】

分析
自己人工进行抽查,肯定不太好,费神又费脑,所以就来写一个简单的随机抽查页面吧,保证公平公正。

  1. 首先,第一个先到的就是自己最近学了的ssm框架,做一个前后端交互式的,连接上数据库,里面存放班级人员信息,id,学号,姓名,但是目前的情况(大二了),写出来的这个东西只能在自己电脑上用,给了别人他们连运行环境都莫得,虽然可以通过电脑ip地址来访问,但是,ip地址还是不要随便传出去的好,所以pass。
  2. 然后,就想到了简单的一个小c、c++、或者java程序,但是这个界面是真的丑,java都还莫得.exe文件,不能直接使用(想的比较远,目的是让完全不会编程的人也能用,嘿嘿)pass掉。
  3. 最后,就是一个单纯的页面了。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