课表——基于简单HTML+CSS

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

起因：这学期老师们加了几门实验课，但教务处又没有在开学的时候录入，就导致自己经常用的课表小程序有些课程对不上，所以就有了自己写一下简单的课表页面的想法。

基于自己的技术水平还不够，所以就先记录目前这个，后面学多点再来优化。

一、二话不多说，先上现在的展示图

二、实现的功能

• 展示周次，显示本周是上课以来的第几
• 由于我们的课程是两节小课的时间一起算的，所以左侧一列才有12，34，67这种名称
• 这是一个6*8 规格的列表展示，对应时间段有课就写在那里

三、目前想实现但还没有实现的功能

• 点击刷新获取周次 获取刷新时的时间，计算周次
• 刷新时获取对应周次课表
• 页面上双击编写删改

四、源代码分析

html文件

• 列表头部 样式方面就不多说了，头部的话就是一个标题作用的my bookStable，接着就是一个输入框，暂时用来显示周次，后面要实现的功能是输入一个数字，点击刷新就获取对应周次的课表

    <div class="header">
        <span>my bookStable</span>
        <input type="text" name="weeks" id="weeks" value="10">
        <input type="button" value="刷新">
    </div>

• 课表主体

    <ul class="weekDays">
        <!-- bug：第一个li为空时后面会集体下移一点 -->
        <li>无</li>
        <li>周一</li>
        <li>周二</li>
        <li>周三</li>
        <li>周四</li>
        <li>周五</li>
        <li>周六</li>
        <li>周日</li>
    </ul>

    <div class="mainBody">
        <div class="left">
            <div>12</div>
            <div>34</div>
            <div>5</div>
            <div>67</div>
            <div>89</div>
            <div>101112</div>
        </div>
        <div class="right">
            <ul class="Monday"></ul>
            <ul class="Tuesday"></ul>
            <ul class="Wednesday"></ul>
            <ul class="Thursday"></ul>
            <ul class="Friday"></ul>
            <ul class="Saturday"></ul>
            <ul class="Sunday"></ul>
        </div>
    </div>

• 基于js的课表内容渲染层面

    <script>
        const lessions = [
            'A=大学物理=A=A=A=eda实验，交电工报告',
            '电工=电工实验=A=A=A=色彩课',
            '数据结构=A=A=体育=A=A',
            '数字逻辑=计组成原理=A=A=A=A',
            'A=A=A=A=A=A',
            '计组实验=A=A=A=A=A',
            'A=A=A=A=A=A'
        ]
        let right = document.querySelector('.right').children;
        let lession ;
        let str;
        for(let i=0;i<right.length;i++){
            lession = lessions[i].split('=');
            str = '';
            for(let j=0;j<lession.length;j++){
                if(lession[j]=='A')str = str + '<li></li>';
                else str = str + '<li>'+lession[j]+'</li>';
            }
            right[i].innerHTML = str;
        }
    </script>

css样式

• 先设置内外边距都为0，防止有些标签自带边距对页面结构影响
• 把li标签自带的前面小圆点去掉

* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}

• 设置头部

.header {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
    background-color: pink;
}

• 课表主体，主要是每个格子的大小还有其中的文本大小

.weekDays {
    margin: 20px auto;
    /* bug:宽度设置为800时会有一个li下移，改成浮动就可以 */
    width: 800px;
    height: 30px;
}
.weekDays li {
    float: left;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
}
.mainBody {
    margin: 20px auto;
    width: 800px;
    height: 180px;
}
.left {
    float: left;
    width: 100px;
    height: 180px;
}
.left div {
    float: left;
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.right {
    float: left;
    width: 700px;
    height: 180px;
    background-color: skyblue;
}
.right ul {
    float: left;
    width: 100px;
    height: 180px;
    background-color: #fff;
}
.right ul li {
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}