简单课程表

先上图

 

 

    <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">
                &#8194
                <a class="mui-control-item" href="#Mon" id="week1" style="width:40px;height:30px">一</a>&#8194
                <a class="mui-control-item" href="#Tue" id="week2" style="width:40px;height:30px">二</a>&#8194
                <a class="mui-control-item" href="#Web" id="week3" style="width:40px;height:30px">三</a>&#8194
                <a class="mui-control-item" href="#Thu" id="week4" style="width:40px;height:30px">四</a>&#8194
                <a class="mui-control-item" href="#Fri" id="week5" style="width:40px;height:30px">五</a>&#8194
                <a class="mui-control-item" href="#Sat" id="week6" style="width:40px;height:30px">六</a>&#8194
                <a class="mui-control-item" href="#Sun" id="week0" style="width:40px;height:30px">日</a>&#8194
            </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">第一节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '2">' +
                                        '<td class="tdLesson">第二节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '3">' +
                                        '<td class="tdLesson">第三节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '4">' +
                                        '<td class="tdLesson">第四节&#8195<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">第一节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '6">' +
                                        '<td class="tdLesson">第二节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '7">' +
                                        '<td class="tdLesson">第三节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '8">' +
                                        '<td class="tdLesson">第四节&#8195<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">第一节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '10">' +
                                        '<td class="tdLesson">第二节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '11">' +
                                        '<td class="tdLesson">第三节&#8195<span class="verticalLine">|</span></td>' +
                                    '</tr>' +
                                    '<tr id="' + l + '12">' +
                                        '<td class="tdLesson">第四节&#8195<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;
    }