📄 calender.htm
字号:
<html>
<head>
<title>
Cookie 实现日历
</title>
</head>
<body>
<script language="JavaScript">
<!--
//写入cookie
//name为cookie的名称，value为cookie的内容，expires为cookie的中止时间
//path指定了保存cookie的路径，domain指定读取该cookie的域
function setCookie(name, value, expires, path, domain, secure)
{
var curCookie = name + "=" + escape(value)
+ ( (expires)? ";expires=" + expires.toGMTString() : "" )
+ ((path) ? "; path=" + path : "")
+ ((domain) ? "; domain=" + domain : "")
+ ((secure) ? "; secure" : "");
if ( (name + "=" + escape(value)).length <= 4000)
document.cookie = curCookie;
else if (confirm("Cookie exceeds 4KB and will be cut!"))
document.cookie = curCookie;
}
//读出cookie内容
//返回指定cookie的内容字符串，当cookie找不到指定cookie时，返回null
function getCookie(name)
{
var prefix = name + "=";
var cookieStartIndex = document.cookie.indexOf(prefix);
if (cookieStartIndex == -1)
return null;
var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
if (cookieEndIndex == -1)
cookieEndIndex = document.cookie.length;
return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}
function initCookie(monthName)
{
//初始化cookie为：^1^^2^^3^^4^...^30^^31^
var text = "";
for (var i = 1; i <= 31; ++i)
text += "^" + i + "^";
//将cookie的结束时间设为当前一个月后
var now = new Date();
now.setTime(now.getTime()+ 1000 * 60 * 60 * 24 * 31);
setCookie(monthName + "Calendar", text, now);
}
//得到指定月日的信息
function getSpecificReminder(num, monthName)
{
var prefix = "^" + num + "^";
var totalCookie = getCookie(monthName + "Calendar");
//找到^num^的位置，startIndex为第一个^在字符串中的位置
var startIndex = totalCookie.indexOf(prefix, 0);
//找到第2个^的下一个位置
var startData = totalCookie.indexOf("^", startIndex + 1) + 1;
if (num == 31)
var endData = totalCookie.length;
else
var endData = totalCookie.indexOf("^", startData);
//从startData到endData的子字符串，包含starData字符，不包含endData字符
return totalCookie.substring(startData, endData);
}
//设置指定月日的信息
function setSpecificReminder(num, monthName, newValue)
{
//下面一段代码与getSpecificReminder用法相同
//都是得到指定月日信息在cookie中的位置
var prefix = "^" + num + "^";
var totalCookie = getCookie(monthName + "Calendar");
var startIndex = totalCookie.indexOf(prefix, 0);
var startData = totalCookie.indexOf("^", startIndex + 1) + 1;
if (num == 31)
var endData = totalCookie.length;
else
var endData = totalCookie.indexOf("^", startData);
var now = new Date();
//将cookie有效期设为一个月后
now.setTime(now.getTime() + 1000 * 60 * 60 * 24 * 31)
setCookie(monthName + "Calendar", totalCookie.substring(0, startData) + newValue + totalCookie.substring(endData, totalCookie.length), now)
}
//用户输入指定月日的信息
function getInput(num, monthName)
{
if (!getCookie(monthName + "Calendar"))
initCookie(monthName);
var newValue = prompt("Enter reminder for current date:", getSpecificReminder(num, monthName));
if (newValue) // user did not cancel
setSpecificReminder(num, monthName, newValue);
}
//返回当前时间的字符串
function getTime()
{
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
now = null;
var ampm = "";
//将24小时形式转为12小时形式
if (hour >= 12)
{
hour -= 12;
ampm = "PM";
}
else
ampm = "AM";
hour = (hour == 0) ? 12 : hour;
//如果分钟为个位数，则补0
if (minute < 10)
minute = "0" + minute;
//返回当前时间字符串
return hour + ":" + minute + " " + ampm;
}
//计算是否闰年
function leapYear(year)
{
if ((year%4==0)&&(year%400!=0))
return true;
return false;
}
//得到指定年月的天数
function getDays(month, year)
{
var days = new Array(12);
days[0] = 31; // January
days[1] = (leapYear(year)) ? 29 : 28; // February
days[2] = 31; // March
days[3] = 30; // April
days[4] = 31; // May
days[5] = 30; // June
days[6] = 31; // July
days[7] = 31; // August
days[8] = 30; // September
days[9] = 31; // October
days[10] = 30; // November
days[11] = 31; // December
return days[month];
}
//得到月份名称
function getMonthName(month)
{
var mon = new Array(12);
mon[0] = "January";
mon[1] = "February";
mon[2] = "March";
mon[3] = "April";
mon[4] = "May";
mon[5] = "June";
mon[6] = "July";
mon[7] = "August";
mon[8] = "September";
mon[9] = "October";
mon[10] = "November";
mon[11] = "December";
return mon[month];
}
function setCal()
{
//当前时间
var now = new Date();
var year = now.getYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var date = now.getDate();
now = null;
//得到该月1日为星期几
var firstDayInstance = new Date(year, month, 1);
var firstDay = firstDayInstance.getDay();
firstDayInstance = null;
//该月的天数
var days = getDays(month, year);
//绘制日历
drawCal(firstDay, days, date, monthName, year);
}
//绘制日历
//参数为:该月第一天星期几，天数，日期（几号），月份，年份
function drawCal(firstDay, lastDate, date, monthName, year)
{
//表头
var text = '<center><table border=2 cellspacing=4><TH colspan=7 height=50><font color="midnightblue" size=3>' + monthName + ' ' + year + '</font></TH>';
//星期数组
var weekDay = new Array(7);
weekDay[0] = "Sun";
weekDay[1] = "Mon";
weekDay[2] = "Tues";
weekDay[3] = "Wed";
weekDay[4] = "Thu";
weekDay[5] = "Fri";
weekDay[6] = "Sat";
//显示星期
text += '<TR align="center" valign="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum)
text += '<td width=60 height=25><font color="darkblue">' + weekDay[dayNum] + '</font></td>';
text += '</TR>';
// declaration and initialization of two variables to help with tables
var digit = 1; //显示日期个数
var curCell = 1; //绘制的单元格个数
//显示的行数
var rows = Math.ceil((lastDate + firstDay) / 7);
for (var row = 1; row <= rows; ++row)
{
text += '<TR align="center" valign="center">';
for (var col = 1; col <= 7; col++)
{
if (digit > lastDate)
break;
//画出第一天前面的空余部分
//firstDay为第一天为星期几，第一列为星期日，所以加1
if (curCell < firstDay+1)
{
text += '<TD></TD>';
curCell++;
}
else
{
if (digit == date) //当天日期
{
text += '<TD height=40><font color="red"><A href="javascript:getInput(' + digit + ', \'' + monthName + '\')" onMouseOver="window.status = \'Store or retrieve data for ' + monthName + ' ' + digit + '\'; return true"><FONT COLOR="' + "red" + '">' + digit + '</FONT></A>';
text += '<BR><font color="purple" siz=2><center>' + getTime() + '</center></font></TD>';
}
else //该月其它天
text += '<TD HEIGHT=' + 40 + '><A HREF="javascript:getInput(' + digit + ', \'' + monthName + '\')" onMouseOver="window.status = \'Store or retrieve data for ' + monthName + ' ' + digit + '\'; return true">' + digit + '</A></TD>';
digit++;
}
}
text += '</TR>';
}
text += '</table></center>';
document.write(text);
}
setCal()
// -->
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -