JavaScrip源码:日历式时间程序
作者:不祥 [文章出自: www.fanqiang.com]
- <script language="JavaScript">
- <!-- Hide this script from old browsers --
- setCal()
- 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
- /* else */ // else not needed when statement is "return"
- 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 ar[month]
- }
- function getMonthName(month) {
- // create array to hold name of each month
- var ar = new Array(12)
- ar[0] = "1月"
- ar[1] = "2月"
- ar[2] = "3月"
- ar[3] = "4月"
- ar[4] = "5月"
- ar[5] = "6月"
- ar[6] = "7月"
- ar[7] = "8月"
- ar[8] = "9月"
- ar[9] = "10月"
- ar[10] = "11月"
- ar[11] = "12月"
- // return name of specified month (parameter)
- return ar[month]
- }
- function setCal() {
- // standard time attributes
- var now = new Date()
- var year = now.getYear()
- var month = now.getMonth()
- var monthName = getMonthName(month)
- var date = now.getDate()
- now = null
- // create instance of first day of month, and extract the day on which it
occurs
- var firstDayInstance = new Date(year, month, 1)
- var firstDay = firstDayInstance.getDay()
- firstDayInstance = null
- // number of days in current month
- var days = getDays(month, year)
- // call function to draw calendar
- drawCal(firstDay + 1, days, date, monthName, year)
- }
- function drawCal(firstDay, lastDate, date, monthName, year) {
- // constant table settings
- var headerHeight = 25 // height of the table's header cell
- var border = 1 // 3D height of table's border
- var cellspacing = 1 // width of table's border
- var headerColor = "midnightblue" // color of table's header
- var headerSize = "4" // size of tables header font
- var colWidth = 15 // width of columns in table
- var dayCellHeight = 12 // height of cells containing days of the week
- var dayColor = "darkblue" // color of font representing week
days
- var cellHeight = 20 // height of cells representing dates in the calendar
- var todayColor = "red" // color specifying today's date in the
calendar
- var timeColor = "black" // color of font representing current
time
- // create basic table structure
- var text = "" // initialize accumulative variable to empty
string
- text += '<CENTER>'
- text += '<TABLE bgcolor=moccasin 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 += year +'年'+monthName
- text += '</FONT>'
- text += '<FONT COLOR="' + timeColor + '" >'
- text += getTime()
-
- 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] = "日"
- weekDay[1] = "一"
- weekDay[2] = "二"
- weekDay[3] = "三"
- weekDay[4] = "四"
- weekDay[5] = "五"
- weekDay[6] = "六"
-
- // 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>'
-
- 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) {
- text += '<TD HEIGHT=' + cellHeight + '>'
- text += '<FONT COLOR="' + todayColor + '">'
- text += digit
- text += '</FONT><BR>'
-
- text += '</TD>'
- } else
- text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
- digit++
- }
- }
- text += '</TR>'
- }
- text += '</TABLE>'
- text += '</CENTER>'
- document.write(text)
- }
- // -- End Hiding Here -->
- </script>
文章加入时间: 2004-11-17 14:58:41 责任编辑: w9 (2794 人次查阅)
|