简单课程表
2019-10-25 06:29:06来源:博客园 阅读 ()
简单课程表
先上图
<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
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:网页设计和开发中,关于字体的常识
下一篇:css垂直居中的实现方法
- [01]HTML基础之简单介绍 2020-06-01
- HTML开发实例-简单相亲网站开发(主体为table) 2020-05-27
- Bootstrap4网格系统+文字排版+颜色 简单练习 2020-04-14
- 简单理解vertical-align属性和基线 2020-04-03
- 网页简单布局之结构与表现原则案例 2020-03-19
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash