简单课程表

先上图

 

 

    <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;
    }