课程表

最新推荐文章于 2021-09-25 15:00:51 发布

让梦々冬眠

最新推荐文章于 2021-09-25 15:00:51 发布

阅读量1.6k

点赞数 3

分类专栏： web 文章标签： web 课程表

本文链接：https://blog.csdn.net/qq2230550672/article/details/100560818

版权

web 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

前言

继前两版课程表之后迎来了新版课程表，此版本采用简约模式，布局一切从简。
此版本已打包为安卓app

第一版采用背景图来衬托整体视觉效果
第二版采用了渐变来渲染

介绍

本次课程表采用自定义填充模式，添加，删除课程简单，代码清晰易于理解。
在这里插入图片描述
状态可根据时间进行自动调整。

代码结解构

骨架（HTML）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>classTable</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="warp">
    <h1>课程表</h1>
    <div class="time">当前时间：<time class="date"></time><time class="weeks"></time><time class="week"></time><time class="time-h"></time></div>
    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>第一节</th>
          <td id="td11" class="thisClass"></td>
          <td id="td12"></td>
          <td id="td13"></td>
          <td id="td14"></td>
          <td id="td15"></td>
        </tr>
        <tr>
          <th>第二节</th>
          <td id="td21"></td>
          <td id="td22"></td>
          <td id="td23"></td>
          <td id="td24"></td>
          <td id="td25"></td>
        </tr>
        <tr>
          <th>第三节</th>
          <td id="td31"></td>
          <td id="td32"></td>
          <td id="td33"></td>
          <td id="td34"></td>
          <td id="td35"></td>
        </tr>
        <tr>
          <th>第四节</th>
          <td id="td41"></td>
          <td id="td42"></td>
          <td id="td43"></td>
          <td id="td44"></td>
          <td id="td45"></td>
        </tr>
      </tbody>
    </table>
    <div class="state">当前状态:<span></span></div>
  </div>
  <script src="index.js"></script>
</body>
</html>

外形（css）

body {
  font-size: 10px; 
}
h1,h2,h3,h4,h5,h6 {
  text-align: center;
}
.time {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 600px;
  height: 25px;
  font-size: 1.5em;
}
.time-h {
  color: rgb(140, 172, 172);
}
table {
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}
th {
  width: 100px;
  height: 40px;
  border: 1px solid rgb(179, 219, 235);
}
td {
  width: 100px;
  height: 40px;
  border: 1px solid skyblue;
}
.thisClass {
  background-color: rgb(220, 236, 241); 
}
.state {
  display: flex;
  justify-content: space-between;
  margin: 20px auto;
  max-width: 600px;
  height: 25px;
  font-size: 1.5em;
}
span {
  display: inline-block;
  width: 70px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid skyblue;
}
.busy {
  color: rgb(235, 245, 247);
  background-color: rgb(224, 134, 134); 
}
.free {
  color: rgb(235, 245, 247);
  background-color: rgb(121, 248, 148); 
}

功能（js）

数据结构
课程信息采用json形式存储data数组中

data = [
  {
    id:'11',
    name: '数据库',
    title: '数据库原理与应用',
    row: 1,
    col: 1,
    address: '4204',
    time: [2,3,4,5,6,7,8,9,10]
  },
  {
    id:'11',
    name: '数据库',
    title: '数据库原理与应用(实验)',
    row: 1,
    col: 1,
    address: 'S603',
    time: [11,12,13,14,15,16,17,18]
  }
]

获取时间

function getTime() {
  let date = new Date()
  let year = date.getFullYear()
  let month = date.getMonth() //0-11
  let days = date.getDate() // 1-31
  let week = date.getDay() //0-6
  let hours = date.getHours() //0-23
  let minutes = date.getMinutes() //0-59
  let seconds = date.getSeconds() //0-59
  time = {
    date: date,
    year: year,
    month: month == 0? 12: month+1,//1-12
    days: days,//1-31
    week: week == 0? 7: week,//1-7
    hours: hours,
    minutes: minutes,
    seconds: seconds
  }
  return time
}

获取当前课程

function getThisClass(time) {
  let place = {row:0,col:0}
  place.col = time.week
  if(time.hours >= 8 && time.hours <9 || time.hours == 9 && time.minutes <50) {
    place.row = 1
  } else if(time.hours >= 11 && time.hours <12 || time.hours == 10 && time.minutes >=10) {
    place.row = 2
  } else if(time.hours >= 14 && time.hours <15 || time.hours == 15 && time.minutes <50) {
    place.row = 3
  } else if(time.hours >= 17 && time.hours <18 || time.hours == 16 && time.minutes >=10) {
    place.row = 4
  }
  return place
}

渲染课表

function showData() {
time = getTime()
  let startTime = new Date(2019,07,26,00,00,00).getTime()
  let endTime = new Date().getTime()
  let thisWeek = Math.ceil((endTime-startTime)/604800000)

  dat.textContent = time.year + '/' +time.month + '/' + time.days
  weks.textContent = '第'+ thisWeek + '周'
  wek.textContent = '周' + time.week
  timeH.textContent = getZero(time.hours) + ':' + getZero(time.minutes) + ':' + getZero(time.seconds)
  let place = getThisClass(time)
  data.forEach(element => {
    if(element.time.includes(thisWeek)) {
      let td = document.querySelector('#td' + element.id)
      td.title = element.title
      td.innerHTML = element.name + '</br>' + element.address
      td.className = ''
      if(element.row == place.row && element.col == place.col) {
        td.className = 'thisClass'
        span.textContent = '上课中'
        span.className = 'busy'
      } else {
        span.textContent = '休息中'
        span.className = 'free'
      }
    }
  })

}
```

让梦々冬眠

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
课程表

前言继前两版课程表之后迎来了新版课程表，此版本采用简约模式，布局一切从简。第一版采用背景图来衬托整体视觉效果第二版采用了渐变来渲染介绍本次课程表采用自定义填充模式，添加，删除课程简单，代码清晰易于理解。状态可根据时间进行自动调整。代码结解构骨架（HTML）<!DOCTYPE html><html lang="en"><head> &...
复制链接

扫一扫

专栏目录