特效：在網頁中顯示可拖動的月歷

 使用本文提供的javascript腳本配合Dreamweaver的層和行為的運用可以在頁面中顯示可拖動的精美月歷

　　具體制作步驟如下

　　啟動Dreamweaver MX新建一個HTML文檔切換到代碼視圖編寫javascript腳本

　　()在HTML文檔的< head>< /head>插入下面的javascript腳本

　　< SCRIPT LANGUAGE=javascript TYPE=text/javascript>
　　//定義月歷函數
　　function calendar() {
　　var today = new Date(); //創建日期對象
　　year = todaygetYear(); //讀取年份
　　thisDay = todaygetDate(); //讀取當前日

　　//創建每月天數數組
　　var monthDays = new Array( );
　　//如果是閏年月份的天數為天
　　if (((year % == ) && (year % != )) || (year % == )) monthDays[] = ;
　　daysOfCurrentMonth = monthDays[todaygetMonth()]; //從每月天數數組中讀取當月的天數
　　firstDay = today;//復制日期對象
　　firstDaysetDate(); //設置日期對象firstDay的日為號
　　startDay = firstDaygetDay(); //確定當月第一天是星期幾

　　//定義周日和月份中文名數組
　　var dayNames = new Array(星期日星期一星期二星期三星期四星期五星期六);
　　var monthNames = new Array(月月月月月月月月月月月月);
　　//創建日期對象
　　var newDate = new Date();

　　//創建表格
documentwrite(< TABLE BORDER= CELLSPACING= CELLPADDING= ALIGN=CENTER BGCOLOR=#FF>)
　　documentwrite(< TR>< TD>< table border= cellspacing= cellpadding= bgcolor=#FF>);
　　documentwrite(< TR>< th colspan= bgcolor=#CEFF>);

　　//顯示當前日期和周日
　　documentwriteln(< FONT STYLE=fontsize:pt;Color:#FF> + newDategetYear() + 年 + monthNames[newDategetMonth()] + + newDategetDate() + 日 + dayNames[newDategetDay()] + < /FONT>);

　　//顯示月歷表頭
documentwriteln(< /TH>< /TR>< TR>< TH BGCOLOR=#FF>< FONT STYLE=fontsize:pt;Color:White>日< /FONT>< /TH>);
documentwriteln(< th bgcolor=#FF>< FONT STYLE=fontsize:pt;Color:White>一< /FONT>< /TH>);
documentwriteln(< TH BGCOLOR=#FF>< FONT STYLE=fontsize:pt;Color:White>二< /FONT>< /TH>);
documentwriteln(< TH BGCOLOR=#FF>< FONT STYLE=fontsize:pt;Color:White>三< /FONT>< /TH>);
documentwriteln(< TH BGCOLOR=#FF>< FONT STYLE=fontsize:pt;Color:White>四< /FONT>< /TH>);
documentwriteln(< TH BGCOLOR=#FF>< FONT STYLE=fontsize:pt;Color:White>五< /FONT>< /TH>);
documentwriteln(< TH BGCOLOR=#FF>< FONT STYLE=fontsize:pt;Color:White>六< /FONT>< /TH>);
documentwriteln(< /TR>< TR>);

　　//顯示每月前面的空日
　　column = ;
　　for (i=; i　　document.writeln("\n< TD>< FONT STYLE='font-size:9pt'> < /FONT>< /TD>");
　　column++;
　　}

　　//如果是當前日就突出顯示(紅色)，否則正常顯示(黑色)
　　for (i=1; i<=daysOfCurrentMonth; i++) {
　　if (i == thisDay) {
　　document.writeln("< /TD>< TD ALIGN='CENTER'>< FONT STYLE='font-size:9pt;Color:#ff0000'>< B>")
　　}
　　else {
　　document.writeln("< /TD>< TD BGCOLOR='#88FF99' ALIGN='CENTER'>< FONT STYLE='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("< TR>< TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")
　　document.writeln("< FORM NAME='time' onSubmit='0'>< FONT STYLE='font-size:9pt;Color:#ffffff'>")

　　//顯示當前時間
　　document.writeln("當前時間:< INPUT TYPE='Text' NAME='textbox' ALIGN='TOP'>< /FONT>< /TD>< /TR>< /TABLE>")
　　document.writeln("< /TD>< /TR>< /TABLE>< /FORM>");
　　}
　　< /SCRIPT>

　　< SCRIPT LANGUAGE="javascript">
　　//初始化控制變量
　　var timerID = null;
　　var timerRunning = false;

　　//定義時間顯示函數
　　function stoptime (){
　　if(timerRunning)
　　clearTimeout(timerID);
　　timerRunning = false;}

　　//定義顯示時間函數
　　function showtime () {
　　var newDate = new Date();
　　var hours = newDate.getHours();
　　var minutes = newDate.getMinutes();
　　var seconds = newDate.getSeconds()
　　var timeValue = " " + ((hours >12) ? hours -12 :hours)
　　timeValue += ((minutes < 10) ? ":0" : ":") + minutes
　　timeValue += ((seconds < 10) ? ":0" : ":") + seconds
　　timeValue += (hours >= 12) ? " 下午 " : " 上午 "
　　document.time.textbox.value = timeValue;
　　timerID = setTimeout("showtime()",1000);//設置超時,使時間動態顯示
　　timerRunning = true;}

　　//顯示當前時間
　　function starttime () {
　　stoptime();
　　showtime();}
　　< /SCRIPT>

　　(2)在HTML文檔正文< body>...< /body>中插入javascript腳本，並給< body>標記添加一些屬性：

　　< BODY onLoad="starttime()" TEXT="#000000" TOPMARGIN="0">
　　< script language="javascript" type="text/javascript">
　　calendar(); //顯示月歷
　　< /script>
　　< /BODY>

　　2、切換到設計視圖，在頁面中插入一層，並把代表HTML文檔正文中的javascript腳本圖標(如果該圖標沒有顯示，請選擇View>Visual Aids>Invisible Elements菜單命令)拖入層中，如下圖所示。Tw.WINgWit.coM

　　

　　3、選擇頁面中的層，然後在Behaviors(行為)面板(如果沒有打開，選擇Window>Behaviors)中單擊"+"按鈕，從彈出的菜單上選擇Drag Layer(拖動層)命令。

　　

　　4、在彈出的Drag Layer對話框中采用默認選項，單擊OK按鈕。此時，Behaviors面板添加了onClick(單擊)事件和Drag Layer動作。

　　

　　5、保存文件，在浏覽器中浏覽，用鼠標按住月歷即可在頁面中自由拖動。

　　怎麼樣，蠻酷吧？

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19227.html