|
<HTML> <HEAD> <TITLE> JavaScript date </TITLE> </HEAD> <BODY> <!-- JavaScript immediate script --> <SCRIPT LANGUAGE="JavaScript"> <!-- // Copyright 1997 -- Tomer Shiran // image files needed: // ******************* // dg0.gif // dg1.gif // dg2.gif // dg3.gif // dg4.gif // dg5.gif // dg6.gif // dg7.gif // dg8.gif // dg9.gif // dgp.gif // Any set of digit images (0-9), and a period // image (.) will work with this script. // instructions: // ************* // Place all image files in a folder / directory. // Add this script, including all comments, to // the desired HTML document. The HTML file must // be located in the same directory as the image // files. document.write(setDate()) function setDate() { // initialize accumulative HTML variable to empty string var text = "" // set standard convention for digit and punctuation images var openImage = "<IMG SRC=\"" + getPath(location.href) + "dg" var closeImage = ".gif\" HEIGHT=21 WIDTH=16>" // initialize time-related variables with current date settings var now = new Date() var month = now.getMonth() var date = now.getDate() var year = now.getYear() now = null // convert integer value of month to standard range month++ // 0 – 11 => 1 – 12 // convert minute and hour values to strings month += "" date += "" year += "" // assign image tags associated with month to text variable for (var i = 0; i < month.length; ++i) { text += openImage + month.charAt(i) + closeImage } // assign image tag of period separator to text variable text += openImage + "p.gif\" HEIGHT=21 WIDTH=9>" // assign image tags associated with date to text variable for (var i = 0; i < date.length; ++i) { text += openImage + date.charAt(i) + closeImage } // assign image tag of period separator to text variable text += openImage + "p.gif\" HEIGHT=21 WIDTH=9>" // assign image tags associated with year to text variable for (var i = 0; i < year.length; ++i) { text += openImage + year.charAt(i) + closeImage } // return accumulative HTML string return text } function getPath(url) { lastSlash = url.lastIndexOf("/") return url.substring(0, lastSlash + 1) } // --> </SCRIPT> </BODY> </HTML>
Example 14-2 (ex14-2.htm). A simple graphical output of the current local date. Here is the output of this script: CalendarThe next example outputs a monthly calendar. Before we discuss the code, take a look at a sample output of the function: Now take a look at the script itself:
<HTML> <HEAD> <TITLE> JavaScript calendar </TITLE> </HEAD> <BODY> <!-- JavaScript immediate script --> <SCRIPT LANGUAGE="JavaScript"> <!-- // Copyright 1997 -- Tomer Shiran 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 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] = "January" ar[1] = "February" ar[2] = "March" ar[3] = "April" ar[4] = "May" ar[5] = "June" ar[6] = "July" ar[7] = "August" ar[8] = "September" ar[9] = "October" ar[10] = "November" ar[11] = "December" // 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 it occurs on 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, 1900 + year) } function drawCal(firstDay, lastDate, date, monthName, year) { // constant table settings 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 += digit text += '</FONT><BR>' text += '<FONT COLOR="' + timeColor + '" SIZE=2>' text += '<CENTER>' + getTime() + '</CENTER>' text += '</FONT>' text += '</TD>' } else text += '<TD HEIGHT=' + cellHeight + '>' + digit + '>/TD>' digit++ } } text += '</TR>' } // close all basic table tags text += '</TABLE>' text += '</CENTER>' // print accumulative HTML string document.write(text) } // --> </SCRIPT> </BODY> </HTML>
Example 14-3 (ex14-3.htm). A calendar based on HTML tables printed via JavaScript.
|
|||||||||||||||||||||||
With any suggestions or questions please feel free to contact us |