星星博客 »  > 

[jQuery项目案例]搭建班级随机点名系统

技术栈
bootstrap+js+jquery+html+css
开发背景
为了使同学们在课堂中更加活跃,认真听讲开发出一款随机点名系统.
展示:在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
基本代码:

<!DOCTYPE html>
<html>
<head>
	<title>点名表</title>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="page-header">
			    <h1 style="margin: 11px;" id="class">江苏农林职业技术学院课堂点名系统:
			    </h1>
			</div>
			<div class="col-md-12 column">
				<div class="row clearfix">
					<div class="col-md-6 column">
						<div class="panel panel-primary">
						    <div class="panel-heading">
						        <h3 class="panel-title">被点学生名单:</h3>
						    </div>
						    <div class="panel-body">
								<table class="table" id = score>
									<caption>使用方法:<br>选择班级后点击确定进入预选,在预选中点击确定系统将为放慢速率最终停止为最终结果.</br>
									</caption>
								</table>
								<p>注意:该模块为被点学生名单,点击下方模块按钮可以为该同学加分。</p>
						    </div>
						</div>
					</div>
					<div class="col-md-6 column">
						<div class="panel panel-primary">
						    <div class="panel-heading">
						        <h3 class="panel-title">随机点名面板:</h3>
						    </div>
						    <div class="panel-body">
								<div class="container" style="width: 530px;">
									<!-- 选择框 -->
									<div class="form-group" style="width: 530px;">
										<select class="form-control" id="sel" style="width: 500px;">
											<option style="width: 500px;">请选择班级</option>
										</select>
										<br>
										</div>
										<div style="text-align: center; margin: 15px; " id="play" class="play">
											
										</div>
									<!-- 数据 -->
									<div style="width: 100%;height: 100%;">
										<table class="table">
											<tbody>
												<tr class="active list-group" id="list-group">								
												</tr>
											</tbody>
										</table>
									</div>
									<!-- 按钮 -->
									<div id='buttons' style="text-align: center;display: none;">
										<button type="button" id="btn1" class="btn btn-primary">开始</button>
										<button type="button" id="btn2" class="btn btn-secondary">确定</button>
									</div>
								</div>
						    </div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-12 column">
				<div class="row clearfix">
					<div class="col-md-6 column">
						<div class="panel panel-primary" style="height: 1189px;">
						    <div class="panel-heading">
						        <h3 class="panel-title">本节课加分学生名单:</h3>
						    </div>
						    <div class="panel-body">
								<table class="table" id = student>
									<button id="score1" class="btn btn-primary btn btn-warning" data-loading-text="Loading..." 
									   	type="button">是否为当前学生加分
									</button>
								</table>
								<p>注意:该模块为本节课堂学生答对题目加分学生的名单!</p>
						    </div>
						</div>
					</div>
					<div class="col-md-6 column">
						<div class="panel panel-primary">
						    <div class="panel-heading">
						        <h3 class="panel-title">本届课堂数据分析:</h3>
						    </div>
						    <div class="panel-body" id="data">
						    	<h1>截止目前为止数据分析如下:</h1>
								<p>班级总人数:<span id="number">0</span></p>
								<p>被点名学生人数:<span id="student_number">0</span></p>
								<p>答对学生人数:<span id="dui_student">0</span></p>
						    	<div id="main" style="width: 552px;height:500px;"></div>
						    	<div id="main1" style="width: 552px;height:500px;"></div>			
						    </div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</body>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>
<script>
var data = data
let this_ = this
let currData;
/* 主轮询器对象 */
let interval;
let funInterval
/* 提示的轮询器*/
let playFun=function(){
	if(play.length>0){
		$("#play").empty();
		let n1 = Math.random()
		let index = Math.floor(n1*(play.length-1));
		if(index==0){
			index=1
		}
		$("#play").append("<p>" + play[index] + "</p>");
	}
}
let interval2;
$(document).ready(function() {
	$("#btn2").hide()
	jQuery.each(data, function(key, val) {
		$("#sel").append("<option value='" + key + "'>" + key + "</option>");
	});
	//监听选中事件
	$('#sel').change(function(data) {
		$("#buttons").css('display','block'); 
		clearInterval(interval)
		/* 每次选都清空一下子 避免重复渲染 */
		$("#list-group").empty();
		//获取选中项的值
		var value = $("#sel option:selected").attr("value");
		$("#class").text("江苏农林职业技术学院("+value+")课堂点名系统");		
		//拼接数据界面 显示按钮 
		$("#score").empty();		
		jQuery.each(this_.data[value], function(key, val) {
			let keyVal=key+1
			$("#list-group").append("<li style='float: left;'  class='list-group-item text-center'><td>" + keyVal+'、'+ this_.data[value][key] + "</td></li>");
		});
		
		/* 当前选中的数组 */
		this_.currData = this_.data[value]
	});


})
$("#btn1").on("click", function() {
	$("#btn2").show()
	$("#btn1").hide()
	/* 辅启动器启动 */
	funInterval=setInterval(playFun,1000)
	/* 辅启动器启动 */
	let $list = $("#list-group")
	let index = 0;
	let fnInterval = function() {
		/* 				let n1 = Math.random()
						let index = Math.floor(n1*4); */
		$list.find('li').removeClass("active")
		$list.find("li:eq(" + index + ")").addClass("active")
		if (this_.currData.length-1 <= index) {
			index = 0
		} else {
			index = ++index;
		}
	}
	clearInterval(interval)
	interval = setInterval(fnInterval, 100)
})
$("#btn2").on("click", function() {
	$("#btn2").hide()
	let time=200;
	let n1 = Math.random()
	let index2 = Math.floor(n1*(15));
	let a=0;
	/* 不能又从0开始,需要从原来有的那个地方开始 的 */
	let index = $("#list-group .active").index();
	/* 如果要改变setInterval里面的时间需要先clear,然后再那个 */
	clearInterval(interval)
	let $list = $("#list-group")
	let fnInterval = function() {
		/* 				let n1 = Math.random()
						let index = Math.floor(n1*4); */
		
		$list.find('li').removeClass("active")
		$list.find("li:eq(" + index + ")").addClass("active")
		if (this_.currData.length-1 <= index) {
			index = 0
		} else {
			index = ++index;
		}
		if (a == index2) {
			/* 真正停止的地方 */
			$("#play").empty();
			$("#play").append("<p id='name' style='text-shadow: 2px 2px 2px  #25e5ef; font-size: larger;'>" + $("#list-group .active").html() + "</p>");
			name=$('#name').text();
			$("#score").append("<button style='float: left;margin: 20px; background-color: #2faf17;'  class='btn btn-primary'><td>" + name+"</td></button>");
			clearInterval(funInterval)
			clearInterval(interval)
			$list.find("li:eq(" + $("#list-group .active").index()+ ")").addClass("bom")
			$("#btn1").show()
			
		}else{
			/* 慢慢变慢的东西 */
			time=50+time
			clearInterval(interval)
			interval = setInterval(fnInterval, time);			
		}
		a=++a
	}
	/* 点了确定之后再随机走这么多秒,这么多次 随机多次之后停下来*/
	interval = setInterval(fnInterval, time);
})
$("#score1").click(function(){
	$("#student").append("<button style='float: left;margin: 20px; background-color: #2faf17;'  class='btn btn-primary'><td>" + name+"</td></button>");
    alert("你已将该学生加入到加分学生列表!");
});

//数据分析模块 
//点名频率:被点名的总人数/班级总人数.
//预估学生知识点掌握程度:答对学生人数/被点名的总人数

var number;         //该班级的总人数
var student_number; //被点名的总人数
var dui_student;    //答对学生的人数


$("#btn1").click(function(){
	number = $("#list-group").children("li").length;
	 //打印控制台本班人数console.log(a)
	student_number1 = $("#score").children("button").length;
	dui_student1 = $("#student").children("button").length;
	//console.log(student_number+1);
	student_number = student_number1+1;
	dui_student = dui_student1;
	$("#number").text(number);
	$("#student_number").text(student_number);
	$("#dui_student").text(dui_student);


	//设置图表
	var p;
	var g;
	var z;
	var w;
	//学生被点到的概率
	p = student_number/number;
	//未被点到的概率
	g = 1-p;
	//掌握程度
	z = dui_student/number;
	//未掌握程度
	w = 1-z;
	var myChart = echarts.init(document.getElementById('main'));
	myChart.setOption({
    	series : [
        	{
            	name: '点名概率',
            	type: 'pie',    // 设置图表类型为饼图
            	radius: '55%',  // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
            	data:[          // 数据数组,name 为数据项名称,value 为数据项值
                	{value:p, name:'学生被点到的概率'},
                	{value:g, name:'学生未被点到的概率'}
            	]
        	}
    	]
	})
	var myChart = echarts.init(document.getElementById('main1'));
	myChart.setOption({
    	series : [
        	{
            	name: '学生掌握程度预测',
            	type: 'pie',    // 设置图表类型为饼图
            	radius: '55%',  // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
            	data:[          // 数据数组,name 为数据项名称,value 为数据项值
                	{value:z, name:'知识点掌握的学生'},
                	{value:g, name:'知识点未掌握的学生'}
            	]
        	}
    	]
	})
});
</script>
</html>
var data={
	'19计算机一班':[],
	'19计算机二班':['张三','王五','李六']
}

var score={'201905230107':['汤东霖','10'],
		   '201905230108':['哈源','10']

}

var play=['恭喜中奖的同学---','这就不可能是我好吧!!!','不是我!!!不是我!!!!',
'下一个下一个!!!','嗯嗯嗯嗯额!!!','不可能是我的吧!!!','没问题的,没问题的!',
'就不可能是我好吧','选不到我,选不到我!!','停下吧,心忐忑忐忑的!!!','这要是能选到我那就怪了!!!',
'晕,还不停吗!!','不能吧','等的好累!!','嗯????','只有这时候我不想当中奖之人','有画面了,有画面了','还好不是我哎','好好学习,天天向上',
'此刻,我想好好学习!!!','哎,二氧化碳','少玩手机多学习','保护好眼睛','听老师的话,老师都是过来人','再也不怕跟老师对上眼喊我回答问题','对错没关系','现在是天选之人,以后也会是天选之人'
,'成功其实很简单,就是当你坚持不住的时候,再坚持一下','to young to simple','不要整天TIMI!!!!','你要好好学习呀','越努力越优秀!!','就决定是你了!!','我保证现在不是心动,是忐忑!!!'
]

更多项目实战源码请关注微信公众号
在这里插入图片描述

相关文章