先上图
<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;
}
原文地址：https://www.cnblogs.com/tenfly/p/11700711.html
时间： 2024-11-13 07:04:34