特效：在網(wǎng)頁中顯示可拖動(dòng)的月歷

1、具體制作步驟如下:1、啟動(dòng)Dreamweaver MX,新建一個(gè)HTML文檔,切換到代碼視圖,編寫javascript腳本。(1在HTML文檔的< head>.< /head>插入下面的javascript腳本:< SCRIPT LANGUAGE="javascript" TYPE="text/javascript">/定義月歷函數(shù)function calendar( var today = new Date(; /創(chuàng)建日期對象year = today.getYear(; /讀取年份thisDay = today.ge

2、tDate(; /讀取當(dāng)前日/創(chuàng)建每月天數(shù)數(shù)組var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31;/如果是閏年,2月份的天數(shù)為29天if (year % 4 = 0 && (year % 100 != 0 | (year % 400 = 0 monthDays1 = 29;daysOfCurrentMonth = monthDaystoday.getMonth(; /從每月天數(shù)數(shù)組中讀取當(dāng)月的天數(shù)firstDay = today;/復(fù)制日期對象firstDay.setDate(1; /

3、設(shè)置日期對象firstDay的日為1號(hào)startDay = firstDay.getDay(; /確定當(dāng)月第一天是星期幾/定義周日和月份中文名數(shù)組var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"var monthNames = new Array("1月","2月","3月","4月",&quo

4、t;5月","6月","7月","8月","9月","10月","11月","12月"/創(chuàng)建日期對象var newDate = new Date(;/創(chuàng)建表格document.write("< TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 ALIGN=CENTER BGCOLOR=#0080FF>"document.write("< TR>< TD

5、>< table border=0 cellspacing=1 cellpadding=2 bgcolor=#88FF99>"document.write("< TR>< th colspan=7 bgcolor=#C8E3FF>"/顯示當(dāng)前日期和周日document.writeln("< FONT STYLE=font-size:9pt;Color:#FF0000>" + newDate.getYear( + "年" + monthNamesnewDate.getMon

6、th( + " " + newDate.getDate( + "日" + dayNamesnewDate.getDay( + "< /FONT>"/顯示月歷表頭document.writeln("< /TH>< /TR>< TR>< TH BGCOLOR=#0080FF>< FONT STYLE=font-size:9pt;Color:White>日< /FONT>< /TH>"document.writeln(&quo

7、t;< th bgcolor=#0080FF>< FONTSTYLE=font-size:9pt;Color:White>一< /FONT>< /TH>"document.writeln("< TH BGCOLOR=#0080FF>< FONTSTYLE=font-size:9pt;Color:White>二< /FONT>< /TH>"document.writeln("< TH BGCOLOR=#0080FF>< FONTSTYLE=fo

8、nt-size:9pt;Color:White>三< /FONT>< /TH>"document.writeln("< TH BGCOLOR=#0080FF>< FONTSTYLE=font-size:9pt;Color:White>四< /FONT>< /TH>"document.writeln("< TH BGCOLOR=#0080FF>< FONTSTYLE=font-size:9pt;Color:White>五< /FONT><

9、 /TH>"document.writeln("< TH BGCOLOR=#0080FF>< FONTSTYLE=font-size:9pt;Color:White>六< /FONT>< /TH>"document.writeln("< /TR>< TR>"/顯示每月前面的"空日"column = 0;for (i=0; i document.writeln("n< TD>< FONT STYLE=font-size:9

10、pt> < /FONT>< /TD>"column+;/如果是當(dāng)前日就突出顯示(紅色,否則正常顯示(黑色for (i=1; i<=daysOfCurrentMonth; i+ if (i = thisDay document.writeln("< /TD>< TD ALIGN=CENTER>< FONTSTYLE=font-size:9pt;Color:#ff0000>< B>"else document.writeln("< /TD>< TD BGCO

11、LOR=#88FF99 ALIGN=CENTER>< FONTSTYLE=font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000>"document.writeln(i;if (i = thisDay document.writeln("< /FONT>< /TD>"column+;if (column = 7 document.writeln("< TR>"column = 0;document.writeln(&quo

12、t;< TR>< TD COLSPAN=7 ALIGN=CENTERVALIGN=TOP BGCOLOR=#0080FF>"document.writeln("< FORM NAME=time onSubmit=0>< FONT STYLE=font-size:9pt;Color:#ffffff>"/顯示當(dāng)前時(shí)間document.writeln("當(dāng)前時(shí)間:< INPUT TYPE=Text NAME=textbox ALIGN=TOP>< /FONT>< /TD><

13、; /TR>< /TABLE>"document.writeln("< /TD>< /TR>< /TABLE>< /FORM>"< /SCRIPT>< SCRIPT LANGUAGE="javascript">/初始化控制變量var timerID = null;var timerRunning = false;/定義時(shí)間顯示函數(shù)function stoptime (if(timerRunningclearTimeout(timerID;timerRunn

14、ing = false;/定義顯示時(shí)間函數(shù)function showtime ( var newDate = new Date(;var hours = newDate.getHours(;var minutes = newDate.getMinutes(;var seconds = newDate.getSeconds(var timeValue = " " + (hours >12 ? hours -12 :hourstimeValue += (minutes < 10 ? ":0" : ":" + minutesti

15、meValue += (seconds < 10 ? ":0" : ":" + secondstimeValue += (hours >= 12 ? " 下午" : " 上午"document.time.textbox.value = timeValue;timerID = setTimeout("showtime(",1000;/設(shè)置超時(shí),使時(shí)間動(dòng)態(tài)顯示timerRunning = true;/顯示當(dāng)前時(shí)間function starttime ( stoptime(;showtim

16、e(;< /SCRIPT>(2在HTML文檔正文< body>.< /body>中插入javascript腳本,并給< body>標(biāo)記添加一些屬性:< BODY onLoad="starttime(" TEXT="#000000" TOPMARGIN="0">< script language="javascript" type="text/javascript">calendar(; /顯示月歷< /script>< /BODY>2、切換到設(shè)計(jì)視圖,在頁面中插入一層,并把代表HTML文檔正文中的javascript腳本圖標(biāo)(如果該圖標(biāo)沒有顯示,請選擇View>Visual Aids>Inv