就要开学了,新学期的课表都发下来了,可是总觉得不怎么方便,所以就自己花了一个下午的时间做了一个网页。用到了bootstrap的样式,html,css,JavaScript,jQuery等。
效果预览:
将本周要上的课颜色设置为绿色,上边粉红色的表示这个学期的这个时间段一直都要上的课,白色的部分表示这周不上。
制作思路:
1.先将课程表的整个内容用Dreamweaver画出。(我可花了很长时间来找Dreamweaver软件,辛亏我聪明去加了个qq群,这里献上百度云地址:http://pan.baidu.com/s/1jHS0ZBo,这里还得感谢给我的人)
2.设置td标签的class属性,用于区分要上课的时间段。比如:《java软件项目开发》这门课的时间为9-15周,class设置为class="o9 c16",表示第九周开始上课,第16周就结课了;如果在同一时间段有两节课,比如《java软件项目开发》和《.net软件项目开发》都在周一上午1、2节,但是java的是9-15周,而.net的是1-8周,则设置为class="o1 c9 o9 c16"。 为什么这么做呢?我用js获取当前周数week,如果同一时间段(我指的是每周一上午1、2节,这样的)只有1节课(我的课表最多只有两节),则当week比较它的class数字,就拿<<java软件项目开发>>来说,则week得满足“9<=week&&week<16”才将它通过js代码将td设置css样式。如果有两节课的话则有4个class标签,week就得在每对中间了。代码: function isMark(str, week) {
//判断str的长度
if (str.length == 2) {
if (week >= str[0] && week < str[1])
return true;
}
//str的长度为4
else {
if ((week >= str[0] && week < str[1]) || (week >= str[2] && week < str[3]))
return true;
}
return false;
}
function isMark(str, week) {
//判断str的长度
if (str.length == 2) {
if (week >= str[0] && week < str[1])
return true;
}
//str的长度为4
else {
if ((week >= str[0] && week < str[1]) || (week >= str[2] && week < str[3]))
return true;
}
return false;
}