前言
近期为公司内部开发了一个会议室预约的小工具,作用是可以显示某一时间段的预约信息,并且对预约信息进行增删改查。其中,前端使用html、css 以及原生js,后端使用Servlet,Tomcat以及Highgo Database。以下是整个的设计、开发的过程。
一 、绘制表格
1.表头
行:表头为一周的时间,周一至周日
列:表头为早八点到下午六点半,每半个小时为一个可预约的时间段。
2.绘制表格
设置单元格id 为“_”+行号+“—”+列号形式,其中行号、列号都从1开始。
function createTable() {
var div = document.getElementById("tableContainer");
var timeArr = ['08:00-08:30','08:30-09:00','09:00-09:30','09:30-10:00','10:00-
10:30','10:30-11:00','11:00-11:30','13:00-13:30','13:30-14:00','14:00-
14:30','14:30-15:00','15:00-15:30','15:30-16:00','16:00-
16:30','16:30-17:00','17:00-17:30','17:30-18:00','18:00-18:30'];
var result = '';
result+= "<table id='table'>";
result += '<tr id = "title">'
+ '<th>'
+ '<div class="head-div">'
+ '<div class="head-date">日期</div>'
+ '<div class="head-time">时间</div>'
+ '</div>'
+ '</th>'
+ '<th></th>'
+ '<th></th>'
+ '<th></th>'
+ '<th></th>'
+ '<th></th>'
+ '<th></th>'
+ '<th></th>'
+ '</tr>';
for(var i=0; i<timeArr.length;i++) {
result += "<tr>";
result +='<td>'+ timeArr[i]+ '</td>';
for(var j=0;j<7;j++) {
var a = '_'+ (i+1)+'-'+(j+1);
result+='<td id = "'+a+' onclick="cellOnclick(this)"
ondblclick="celldbClick(this)" onmouseover="cellOver(this)"
onmouseout = "cellMove(this)"></td>';
}
result +="</tr>";
}
result+="</table>";
div.innerHTML = result;
}
3.显示一周时间
时间格式为星期+日期,setDate(date)设置日期,addDate(date,n)方法使日期一次增加,其中,date为当日日期,n为增加的天数。formatDate(date)来规定日期显示的格式,因为date.getDate()返回的天数值如果小于10则不补零,不符合日期的标准格式,因此,天数值小于10要补零。
后因需求变更,需要将可选择时间段放置在标题栏附近,显示从上周开始共计五周的时间,此时间不带年份,因此将formatDate(date)方法优化为可以带年份也可以不带年份的format(date,flag),如果日期格式为年、月、日形式,将flag设为true,如果日期格式为月、日,将flag设为false.
function setDate(date) {
if(localStorage.getItem("current") == "current") {
date = addDate(date,0);
}
if(localStorage.getItem("last") == "last") {
date = addDate(date,-7);
}
if(localStorage.getItem("next") == "next") {
date = addDate(date,7);
}
if(localStorage.getItem("three") == "three") {
date = addDate(date,14);
}
if(localStorage.getItem("four") == "four") {
date = addDate(date,21);
}
// set one week time
var currentDay = date.getDay();
if(currentDay == 0) {
date = addDate(date,-7);
}else{
date = addDate(date,(-currentDay));
}
for(var i=1;i<cellLength;i++) {
cells[i].innerHTML = formatDate(addDate(date,1),true);
}
};
function addDate(date,n) {
date.setDate(date.getDate() + n);
return date;
};
function formatDate(date,flag) {
var year = date.getFullYear()+'.';
var month = (date.getMonth()+1)+'.';
var day = date.getDate();
if(day<10){
day = '0'+ day;
}
if(flag) {
var week =date.getDay();
switch (week) {
case 0:
week="星期日";
break;
case 1 :
week="星期一";
break;
case 2 :
week="星期二";
break;
case 3 :
week="星期三";
break;
case 4 :
week="星期四";
break;
case 5 :
week="星期五";
break;
case 6:
week="星期六";
break;
}
return week + '</br>' + year + month + day;
} else {
var days = month + day;
return days;
}
};
二、预约信息表格设计
因为页面主要以表格为主,且表格所占空间比较大,因此预约时所需填写的内容以弹窗形式展示,双击表格可以进行预约信息的增删改。预约信息为:会议时间,会议主题,参会人数,预约人,设备,招待,备注。
1. 会议时间:开始时间为所选单元格的开始时间,结束时间可选
2. 会议主题:必填