在线记事的日历

最新推荐文章于 2024-09-14 18:52:56 发布

airweilai

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量639

点赞数

文章标签：日历 function calendar domain date javascript

本文链接：https://blog.csdn.net/airweilai/article/details/2545525

版权

在线记事的日历

===[在线记事的日历]共1步===



1、将以下代码加入<body></body>之间



<script LANGUAGE="JavaScript">

<!--

var caution = false

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 (!caution || (name + "=" + escape(value)).length <= 4000)

		document.cookie = curCookie

	else

		if (confirm("Cookie exceeds 4KB and will be cut!"))

			document.cookie = curCookie

}

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))

}



// name - name of the cookie

// [path] - path of the cookie (must be same as path used to create cookie)

// [domain] - domain of the cookie (must be same as domain used to create cookie)

// * path and domain default if assigned null or omitted if no explicit argument proceeds

function deleteCookie(name, path, domain) {

	if (getCookie(name)) {

		document.cookie = name + "=" + 

		((path) ? "; path=" + path : "") +

		((domain) ? "; domain=" + domain : "") +

		"; expires=Thu, 01-Jan-70 00:00:01 GMT"

	}

}



// date - any instance of the Date object

// * you should hand all instances of the Date object to this function for "repairs"

// * this function is taken from Chapter 14, "Time and Date in JavaScript", in "Learn Advanced JavaScript Programming"

function fixDate(date) {

	var base = new Date(0)

	var skew = base.getTime()

	if (skew > 0)

		date.setTime(date.getTime() - skew)

}



function initCookie(monthName) {

	// initializes cookie with the following format:

	// ^1^^2^^3^^4^...^30^^31^



	// initialize accumulative variable

	var text = ""

	for (var i = 1; i <= 31; ++i) {

		text += "^" + i + "^"

	}



	var now = new Date()

	fixDate(now)



	// set time to one month (31 days) in the future

	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")

	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)

	

	return totalCookie.substring(startData, endData)

}



function setSpecificReminder(num, monthName, newValue) {

	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()

	fixDate(now)



	// set time to one month (31 days) in the future

	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() {

	// initialize time-related variables with current time settings

	var now = new Date()

	var hour = now.getHours()

	var minute = now.getMinutes()

	now = null

	var ampm = "" 



	// validate hour values	and set value of ampm

	if (hour >= 12) {

		hour -= 12

		ampm = "PM"

	} else

		ampm = "AM"

	hour = (hour == 0) ? 12 : hour



	// add zero digit to a one digit minute

	if (minute < 10)

		minute = "0" + minute // do not parse this number!



	// return time string

	return hour + ":" + minute + " " + ampm

}



function leapYear(year) {

	if (year % 4 == 0) // basic rule

		return true // is leap year

	return false // is not leap year

}



function getDays(month, year) {

	// create array to hold number of days in each month

	var ar = new Array(12)

	ar[0] = 31 // January

	ar[1] = (leapYear(year)) ? 29 : 28 // February

	ar[2] = 31 // March

	ar[3] = 30 // April

	ar[4] = 31 // May

	ar[5] = 30 // June

	ar[6] = 31 // July

	ar[7] = 31 // August

	ar[8] = 30 // September

	ar[9] = 31 // October

	ar[10] = 30 // November

	ar[11] = 31 // December



	// return number of days in the specified month (parameter)

	return ar[month]

}



function getMonthName(month) {

	// create array to hold name of each month

	var ar = new Array(12)

	ar[0] = "一月"

	ar[1] = "二月"

	ar[2] = "三月"

	ar[3] = "四月"

	ar[4] = "五月"

	ar[5] = "六月"

	ar[6] = "七月"

	ar[7] = "八月"

	ar[8] = "九月"

	ar[9] = "十月"

	ar[10] = "十一月"

	ar[11] = "十二月"

	return ar[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

	var firstDayInstance = new Date(year, month, 1)

	var firstDay = firstDayInstance.getDay()

	firstDayInstance = null

	var days = getDays(month, year)

	drawCal(firstDay + 1, days, date, monthName, year)

}



function drawCal(firstDay, lastDate, date, monthName, year) {

	var headerHeight = 50 // height of the table's header cell

	var border = 2 // 3D height of table's border

	var cellspacing = 4 // width of table's border

	var headerColor = "midnightblue" // color of table's header

	var headerSize = "+3" // size of tables header font

	var colWidth = 60 // width of columns in table

	var dayCellHeight = 25 // height of cells containing days of the week

	var dayColor = "darkblue" // color of font representing week days

	var cellHeight = 40 // height of cells representing dates in the calendar

	var todayColor = "red" // color specifying today's date in the calendar

	var timeColor = "purple" // color of font representing current time



	// create basic table structure

	var text = "" // initialize accumulative variable to empty string

	text += '<CENTER>'

	text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings

	text += 	'<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell

	text += 		'<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header

	text += 			monthName + ' ' + year 

	text += 		'</FONT>' // close table header's font settings

	text += 	'</TH>' // close header cell



	// variables to hold constant settings

	var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'

	openCol += '<FONT COLOR="' + dayColor + '">'

	var closeCol = '</FONT></TD>'



	// create array of abbreviated day names

	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"

	

	// create first row of table to set column width and specify week day

	text += '<TR ALIGN="center" VALIGN="center">'

	for (var dayNum = 0; dayNum < 7; ++dayNum) {

		text += openCol + weekDay[dayNum] + closeCol 

	}

	text += '</TR>'

	

	// declaration and initialization of two variables to help with tables

	var digit = 1

	var curCell = 1

	

	for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {

		text += '<TR ALIGN="right" VALIGN="top">'

		for (var col = 1; col <= 7; ++col) {

			if (digit > lastDate)

				break

			if (curCell < firstDay) {

				text += '<TD></TD>';

				curCell++

			} else {

				if (digit == date) { // current cell represent today's date

					text += '<TD HEIGHT=' + cellHeight + '>'

					text += '<FONT COLOR="' + todayColor + '">'

					text += '<A HREF="javascript:getInput(' + digit + ', /'' + monthName + '/')" onMouseOver="window.status = /'Store or retrieve data for ' + monthName + ' ' + digit + '/'; return true"><FONT COLOR="' + todayColor + '">' + digit + '</FONT></A>'

					text += '<BR>'

					text += '<FONT COLOR="' + timeColor + '" SIZE=2>'

					text += '<CENTER>' + getTime() + '</CENTER>'

					text += '</FONT>'

					text += '</TD>'

				} else

					text += '<TD HEIGHT=' + cellHeight + '><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>'

	text += '</CENTER>'

	document.write(text) 

}



setCal()



</script>