<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>课程表</title>
<script>
var currDT;
var aryDay = new Array("日", "一", "二", "三", "四", "五", "六");
//初始页面
function initWeek(date) {
if (date == undefined) {
currDT = new Date();
} else {
currDT = new Date(date);
}
showDate();
}
//上一周 或 下一周
function addWeek(ope) {
var num = 0;
if (ope == "-") {
num = -7;
}
else if (ope == "+") {
num = 7;
}
currDT = addDate(currDT, num);
showDate();
return currDT;
}
function showDate() {
span1.innerHTML = currDT.toLocaleDateString(); //显示日期
var dw = currDT.getDay();
var tdDT;
//确定周一是那天
if (dw == 0) {
tdDT = addDate(currDT, -6);
}
else {
tdDT = addDate(currDT, (1 - dw));
}
//在表格中显示一周的日期
var objTB = document.getElementById("trWeek");
for (var i = 0; i < 7; i++) {
if (tdDT.toLocaleDateString() == currDT.toLocaleDateString()) {
objTB.cells[i + 1].style.color = "red"; //currDT突出显示
}
dw = tdDT.getDay();
var month = (tdDT.getMonth() + 1) < 10 ? "0" + (tdDT.getMonth() + 1) : (tdDT.getMonth() + 1);
var date = tdDT.getDate() < 10 ? "0" + tdDT.getDate() : tdDT.getDate();
objTB.cells[i + 1].innerHTML = "星期" + aryDay[dw] + "<br />[" + tdDT.getFullYear() + "-" + month + "-" + date + "]";
tdDT = addDate(tdDT, 1); //下一天
}
}
//增加或减少若干天，由 num 的正负决定，正为加，负为减
function addDate(dt, num) {
var ope = "+";
if (num < 0) {
ope = "-";
}
var reDT = dt;
for (var i = 0; i < Math.abs(num) ; i++) {
reDT = addOneDay(reDT, ope);
}
return reDT;
}
//增加或减少一天，由ope决定, + 为加，- 为减，否则不动
function addOneDay(dt, ope) {
var num = 0;
if (ope == "-") {
num = -1;
}
else if (ope == "+") {
num = 1;
}
var y = dt.getFullYear();
var m = dt.getMonth();
var lastDay = getLastDay(y, m);
var d = dt.getDate();
d += num;
if (d < 1) {
m--;
if (m < 0) {
y--;
m = 11;
}
d = getLastDay(y, m);
}
else if (d > lastDay) {
m++;
if (m > 11) {
y++;
m = 0;
}
d = 1;
}
var reDT = new Date();
reDT.setYear(y);
reDT.setMonth(m);
reDT.setDate(d);
return reDT;
}
//是否为闰年
function isLeapYear(y) {
var isLeap = false;
if (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) {
isLeap = true;
}
return isLeap;
}
//每月最后一天
function getLastDay(y, m) {
var lastDay = 28;
m++;
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
lastDay = 31;
}
else if (m == 4 || m == 6 || m == 9 || m == 11) {
lastDay = 30;
}
else if (isLeapYear(y) == true) {
lastDay = 29;
}
return lastDay;
}
//获取任意周的开始时间
function getAnyWeekStart(date) {
var currentDay = date.getDay();
if (currentDay == 0) { currentDay = 7; }
var mondayTime = date.getTime() - (currentDay - 1) * 24 * 60 * 60 * 1000;
var startTime = new Date(mondayTime).Format("yyyy/MM/dd");
return startTime;
}
//获取任意周的结束时间
function getAnyWeekEnd(date) {
var currentDay = date.getDay();
if (currentDay == 0) { currentDay = 7; }
var sundayTime = date.getTime() + (7 - currentDay) * 24 * 60 * 60 * 1000;
var endTime = new Date(sundayTime).Format("yyyy/MM/dd");
return endTime;
}
function dockPostion(date) {
//currDT = new Date(date);
//var start = getAnyWeekStart(currDT);
//var end = getAnyWeekEnd(currDT);
initWeek(date);
}
window.onload = function () {
date.value = new Date().toLocaleDateString();
initWeek();
}
</script>
</head>
<body>
<div>
<center>
<button style="cursor:hand;font-weight:bold;" onclick="addWeek('-')" title="上一周">←</button>
<span id="span1"></span>
<button style="cursor:hand;font-weight:bold;" onclick="addWeek('+')" title="下一周">→</button>
</center>
</div>
<div style="margin-top: 10px;">
<center>
<h3>课程表</h3>
<table id="tb1" border="1" style="font-size: 10pt">
<thead>
<tr id="trWeek">
<th>课程/星期</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>第一节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</center>
<div style="margin-top:15px;">
<center>
<input id="date" type="text" />
<button onclick="dockPostion(date.value)">定位日期</button>
</center>
</div>
</div>
</body>
</html>