技术栈
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!!!!','你要好好学习呀','越努力越优秀！！','就决定是你了！！','我保证现在不是心动，是忐忑！！！'
]
更多项目实战源码请关注微信公众号
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
