鉴于大家对Javascript十分关注，我们编辑小组在此为大家搜集整理了“用JavaScript在网页中显示可拖动月历”一文，供大家参考学习!
使用本文提供的JavaScript脚本，配合Dreamweaver的层和行为的运用，可以在页面中显示可拖动的精美月历。
具体制作步骤如下：
1、启动Dreamweaver MX，新建一个HTML文档，切换到代码视图，编写JavaScript脚本。
(1)在HTML文档的<head>...</head>插入下面的JavaScript脚本：
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><BR>//定义月历函数<BR>function calendar() {<BR>var today = new Date(); //创建日期对象<BR>year = today.getYear(); //读取年份<BR>thisDay = today.getDate(); //读取当前日<BR><BR>//创建每月天数数组<BR>var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);<BR>//如果是闰年，2月份的天数为29天<BR>if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;<BR>daysOfCurrentMonth = monthDays[today.getMonth()]; //从每月天数数组中读取当月的天数<BR>firstDay = today;//复制日期对象<BR>firstDay.setDate(1); //设置日期对象firstDay的日为1号<BR>startDay = firstDay.getDay(); //确定当月第一天是星期几<BR><BR>//定义周日和月份中文名数组<BR>var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");<BR>var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");<BR>//创建日期对象<BR>var newDate = new Date();<BR><BR>//创建表格<BR>document.write("<TABLE BORDER=´0´ CELLSPACING=´0´ CELLPADDING=´2´ ALIGN=´CENTER´ BGCOLOR=´#0080FF´>")<BR>document.write("<TR><TD><table border=´0´ cellspacing=´1´ cellpadding=´2´ bgcolor=´#88FF99´>");<BR>document.write("<TR><th colspan=´7´ bgcolor=´#C8E3FF´>");<BR><BR>//显示当前日期和周日<BR>document.writeln("<FONT STYLE=´font-size:9pt;Color:#FF0000´>" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + "</FONT>");<BR><BR>//显示月历表头<BR>document.writeln("</TH></TR><TR><TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>日</FONT></TH>");<BR>document.writeln("<th bgcolor=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>一</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>二</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>三</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>四</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>五</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>六</FONT></TH>");<BR>document.writeln("</TR><TR>");<BR><BR>//显示每月前面的"空日"<BR>column = 0;<BR>for (i=0; i<startDay; i++) {<BR>document.writeln(" <TD><FONT STYLE=´font-size:9pt´> </FONT></TD>");<BR>column++;<BR>}<BR><BR>//如果是当前日就突出显示(红色)，否则正常显示(黑色)<BR>for (i=1; i<=daysOfCurrentMonth; i++) {<BR>if (i == thisDay) {<BR>document.writeln("</TD><TD ALIGN=´CENTER´><FONT STYLE=´font-size:9pt;Color:#ff0000´><B>")<BR>}<BR>else {<BR>document.writeln("</TD><TD BGCOLOR=´#88FF99´ ALIGN=´CENTER´><FONT STYLE=´font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000´>");<BR>}<BR>document.writeln(i);<BR>if (i == thisDay) document.writeln("</FONT></TD>")<BR>column++;<BR>if (column == 7) {<BR>document.writeln("<TR>");<BR>column = 0;<BR>}<BR>}<BR>document.writeln("<TR><TD COLSPAN=´7´ ALIGN=´CENTER´ VALIGN=´TOP´ BGCOLOR=´#0080FF´>")<BR>document.writeln("<FORM NAME=´time´ onSubmit=´0´><FONT STYLE=´font-size:9pt;Color:#ffffff´>")<BR><BR>//显示当前时间<BR>document.writeln("当前时间:<INPUT TYPE=´Text´ NAME=´textbox´ ALIGN=´TOP´></FONT></TD></TR></TABLE>")<BR>document.writeln("</TD></TR></TABLE></FORM>");<BR>}<BR></SCRIPT><BR><BR><SCRIPT LANGUAGE="JavaScript"><BR>//初始化控制变量<BR>var timerID = null;<BR>var timerRunning = false;<BR><BR>//定义时间显示函数<BR>function stoptime (){<BR>if(timerRunning)<BR>clearTimeout(timerID);<BR>timerRunning = false;}<BR><BR>//定义显示时间函数<BR>function showtime () {<BR>var newDate = new Date();<BR>var hours = newDate.getHours();<BR>var minutes = newDate.getMinutes();<BR>var seconds = newDate.getSeconds()<BR>var timeValue = " " + ((hours >12) ? hours -12 :hours)<BR>timeValue += ((minutes < 10) ? ":0" : ":") + minutes<BR>timeValue += ((seconds < 10) ? ":0" : ":") + seconds<BR>timeValue += (hours >= 12) ? " 下午 " : " 上午 "<BR>document.time.textbox.value = timeValue;<BR>timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示<BR>timerRunning = true;}<BR><BR>//显示当前时间<BR>function starttime () {<BR>stoptime();<BR>showtime();}<BR></SCRIPT><BR>
