简单课程表
程序员文章站
2022-05-09 11:29:31
先上图 ......
先上图
<div class="head">
<h1 class="mui-title" style="font-size:17px;font-family:pingfang sc;font-weight:400;padding-top:15px;color:rgba(102,102,102,1)">课程表</h1>
</div>
<!--<div class="weekdays">
<li>09-02</li>
<li>09-03</li>
<li>09-04</li>
<li>09-05</li>
<li>09-06</li>
<li>09-07</li>
<li>09-08</li>
</div>-->
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="slidersegmentcontrol" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted week">
 
<a class="mui-control-item" href="#mon" id="week1" style="width:40px;height:30px">一</a> 
<a class="mui-control-item" href="#tue" id="week2" style="width:40px;height:30px">二</a> 
<a class="mui-control-item" href="#web" id="week3" style="width:40px;height:30px">三</a> 
<a class="mui-control-item" href="#thu" id="week4" style="width:40px;height:30px">四</a> 
<a class="mui-control-item" href="#fri" id="week5" style="width:40px;height:30px">五</a> 
<a class="mui-control-item" href="#sat" id="week6" style="width:40px;height:30px">六</a> 
<a class="mui-control-item" href="#sun" id="week0" style="width:40px;height:30px">日</a> 
</div>
<div class="mui-slider-group" style="margin-top:58px">
<div id="mon" class=" mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="tue" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="web" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="thu" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="fri" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="sat" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
<div id="sun" class="mui-slider-item mui-control-content" style="padding-top:22px">
</div>
</div>
</div>
</div>
.course1 {
background:#f65558;
border-radius:5px;
}
.course2 {
background:#f39772;
border-radius:5px;
}
.course3 {
background:#eca5ee;
border-radius:5px;
}
.course4 {
background:#75a5ee;
border-radius:5px;
}
.course5 {
background:#88e39f;
border-radius:5px;
}
.course6 {
background:#63e9a4;
border-radius:5px;
}
.course7 {
background:#f278bf;
border-radius:5px;
}
.course8 {
background:#e0a1e3;
border-radius:5px;
}
.course9 {
background:#97c8bd;
border-radius:5px;
}
/*如果需要展示日期，需要用到此样式
li{
text-decoration: none;
list-style: none;
float:left;
text-align:center;
width:14.2%;
border-radius:50%;
color:rgba(153,153,153,1);
}
.head {
width:100%;
height:68px;
position:fixed;
top:0;
background:rgba(255,255,255,1);
z-index:2
}
.weekdays {
width:375px;
height:30px;
background:rgba(255,255,255,1);
opacity:1;
}*/
.week {
width:375px;
height:50px;
background:rgba(255,255,255,1);
box-shadow:0px 3px 6px rgba(0,0,0,0.06);
opacity:1;
padding:10px;
position:fixed;
/*top:68px;*/
z-index:2
}
#slidersegmentcontrol a{
border-radius:50%;
background:rgba(235,235,235,1);
opacity:1;
}
.timeperiod {
width:32px;
height:22px;
padding:15px;
color:rgba(102,102,102,1);
font-size:16px
}
.horizontalline {
height: 10px;
border-bottom: 1px rgba(217,217,217,1) solid;
width:75%;
float:right;
margin-right:10px;
}
.verticalline {
width:2px;
height:30px;
background:rgba(255,255,255,1);
box-shadow:0px 3px 6px rgba(0,0,0,0.1);
opacity:1;border-radius:1px;
color:white
}
.tdlesson {
font-size:12px;
padding-left:48px;
width:100px
}
#slidersegmentcontrol a.mui-active {
box-shadow:#eee2f4 0px 0px 20px;
background:rgba(255,128,128,1);
color:white;
}
load();
function load() {
$.ajax({
url: config.url() + "/workcenter/ajax/stucourse.ashx?r=" + math.random(),
type: "post",
datatype: "json",
data: { studentid: geturldata().studentid },
xhrfields: {
withcredentials: true
},
success: function (res) {
var loadlesson = 0;//添加一次课程节数模板
var exist = 0;//数组里不存在该课程，用于判断是否为课程添加新背景色
var length = 0;//课程背景色数组长度
var j = 0;//颜色数组索引
var coursename = new array();//课程-颜色键值表
var color = new array("course1", "course2", "course3", "course4", "course5", "course6", "course7", "course8", "course9");
for (i = 0; i < res.data.length; i++) {
var courselist = res.data[i].kcb.split('<br>');//课程信息拆分
var weekday = res.data[i].xqj;//周几
var lessonlength = res.data[i].skcd;//课程长度
//课程表动态添加背景色，相同课程相同颜色
if (length>0) {
for (var key in coursename) {
exist = 0;
if (courselist[0] == key) { exist = 1; break; }
}
if (exist == 0) {
coursename[courselist[0]] = color[j];
if (j >= 8) {
j = 0;
}
else {
j++;
}
}
}
else {
coursename[courselist[0]] = color[j];
if (j >=8) {
j = 0;
}
else {
j++;
}
length++;
}
//添加课程节数模板
if (loadlesson == 0) {
for (l = 0; l < 7; l++) {
var rr = '<span class="timeperiod">上午<span><div class="horizontalline"></div></style>' +
'<table width="100%" style="border-collapse:separate; border-spacing:15px;">' +
'<tr id="' + l + '1">' +
'<td class="tdlesson">第一节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '2">' +
'<td class="tdlesson">第二节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '3">' +
'<td class="tdlesson">第三节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '4">' +
'<td class="tdlesson">第四节 <span class="verticalline">|</span></td>' +
'</tr>' +
'</table>' +
'<span class="timeperiod">下午<span><div class="horizontalline"></div></style>' +
'<table width="100%" style="border-collapse:separate; border-spacing:15px;">' +
'<tr id="' + l + '5">' +
'<td class="tdlesson">第一节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '6">' +
'<td class="tdlesson">第二节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '7">' +
'<td class="tdlesson">第三节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '8">' +
'<td class="tdlesson">第四节 <span class="verticalline">|</span></td>' +
'</tr>' +
'</table>' +
'<span class="timeperiod">晚上<span><div class="horizontalline"></div></style>' +
'<table width="100%" style="border-collapse:separate; border-spacing:15px;">' +
'<tr id="' + l + '9">' +
'<td class="tdlesson">第一节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '10">' +
'<td class="tdlesson">第二节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '11">' +
'<td class="tdlesson">第三节 <span class="verticalline">|</span></td>' +
'</tr>' +
'<tr id="' + l + '12">' +
'<td class="tdlesson">第四节 <span class="verticalline">|</span></td>' +
'</tr>' +
'</table>';
switch (l) {
case 0: $("#sun").append(rr); break;
case 1: $("#mon").append(rr); break;
case 2: $("#tue").append(rr); break;
case 3: $("#web").append(rr); break;
case 4: $("#thu").append(rr); break;
case 5: $("#fri").append(rr); break;
case 6: $("#sat").append(rr); break;
}
}
loadlesson++;
}
var row = '<td rowspan="' + res.data[i].skcd + '" class="' + coursename[courselist[0]] + '" style="font-size:12px;padding:5px;color:white">' + courselist[0] + '<br/> ' + courselist[2] + '<span style="float:right">' + courselist[3] + '</span> </td>';
var trname = weekday +""+ res.data[i].djj;
$("#" + trname + "").append(row);
}
}
})
}
function geturldata() {
var url = window.location.search; //url中?之后的部分
url = url.substring(1); //去掉?
var dataobj = {};
if (url.indexof('&') > -1) {
url = url.split('&');
for (var i = 0; i < url.length; i++) {
var arr = url[i].split('=');
dataobj[arr[0]] = arr[1];
}
}
else {
url = url.split('=');
dataobj[url[0]] = url[1];
}
return dataobj;
}
//选中今天
$("#week" + new date().getday() + "").addclass("mui-active");
//展示今天课程
switch (new date().getday()) {
case 0: $("#sun").addclass("mui-active"); break;
case 1: $("#mon").addclass("mui-active"); break;
case 2: $("#tue").addclass("mui-active"); break;
case 3: $("#web").addclass("mui-active"); break;
case 4: $("#thu").addclass("mui-active"); break;
case 5: $("#fri").addclass("mui-active"); break;
case 6: $("#sat").addclass("mui-active"); break;
}