Online Documentation Server
 ПОИСК
ods.com.ua Web
 КАТЕГОРИИ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ПОДПИСКА

 О КОПИРАЙТАХ
Вся предоставленная на этом сервере информация собрана нами из разных источников. Если Вам кажется, что публикация каких-то документов нарушает чьи-либо авторские права, сообщите нам об этом.




Previous Table of Contents Next

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

Calendar

The 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.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us