纯JS实现课表

最新推荐文章于 2024-09-20 17:30:45 发布

懒得懒

最新推荐文章于 2024-09-20 17:30:45 发布

阅读量4.3k

点赞数 4

分类专栏： javascript

本文链接：https://blog.csdn.net/wuChiSha/article/details/108219816

版权

本文介绍了如何使用纯JavaScript和CSS实现一个灵活的课表。通过flex布局结合position定位，分步骤展示了如何创建一个空课表并填充课程信息。数据结构包括课程名称、对应周几、开始和结束节次。最后，给出了使用CSS和JavaScript实现课表的具体代码片段。

摘要由CSDN通过智能技术生成

一、需求描述

如下图所示：

实现一个课表，对应现实生活中对的课表：一门课一天内，可以对应多个节次。

二、实现思路及代码

2.1实现思路：

flex布局+position

分两步：1、先画出一个空课表；2、在正确的位置上显示课程名称

2.2数据结构

数据中需要包含：课程名称（course）、对应周几(week)、对应的开始节次(startSection)、结束节次(endSection)，如下

const data = [
  {
    week:1,
    startSection:1,
    endSection:2,
    course:'语文'
  },
  {
    week:1,
    startSection:10,
    endSection:12,
    course:'化学'
  },
  {
    week:3,
    startSection:1,
    endSection:4,
    course:'大学物理'
  },
  {
    week:4,
    startSection:5,
    endSection:6,
    course:'English'
  },
]