简单课程表

先上图

 

 

    

        
课程表
    
        
    

        

            

                 
                一 
                二 
                三 
                四 
                五 
                六 
                日 
            
                       
            

                


                
                

 
                
 
                

   
                
 
                


                
  
                


                
  
                


                
  
                


                
  
            
            
        
    

        .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('
');//课程信息拆分
                        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 = '上午
' +
                                '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                '
第一节 |
第二节 |
第三节 |
第四节 |
' +
                                '下午
' +
                                '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                '
第一节 |
第二节 |
第三节 |
第四节 |
' +
                                '晚上
' +
                                '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                    '' +
                                        '' +
                                    '' +
                                '
第一节 |
第二节 |
第三节 |
第四节 |
';

                                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 = '' + courseList[0] + '
 ' + courseList[2] + '' + courseList[3] + ' ';
                        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;
    }