用JavaScript在網頁中顯示可拖動月曆

來源:互聯網
上載者:User
具體製作步驟如下:

  1、啟動Dreamweaver MX,建立一個HTML文檔,切換到程式碼檢視,編寫JavaScript指令碼。

  (1)在HTML文檔的<head>...</head>插入下面的JavaScript指令碼:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
//定義月曆函數
function calendar() {
var today = new Date(); //建立日期對象
year = today.getYear(); //讀取年份
thisDay = today.getDate(); //讀取當前日

//建立每月天數數組
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
//如果是閏年,2月份的天數為29天
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
daysOfCurrentMonth = monthDays[today.getMonth()]; //從每月天數數組中讀取當月的天數
firstDay = today;//複製日期對象
firstDay.setDate(1); //設定日期對象firstDay的日為1號
startDay = firstDay.getDay(); //確定當月第一天是星期幾

//定義周日和月份中文名數組
var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
//建立日期對象
var newDate = new Date();

//建立表格
document.write("<TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' ALIGN='CENTER' BGCOLOR='#0080FF'>")
document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='#88FF99'>");
document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>");

//顯示當前日期和周日
document.writeln("<FONT STYLE='font-size:9pt;Color:#FF0000'>" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + "</FONT>");

//顯示月曆表頭
document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>日</FONT></TH>");
document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>");
document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>");
document.writeln("</TR><TR>");

//顯示每月前面的"空日"
column = 0;
for (i=0; i<startDay; i++) {
document.writeln(" <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功能表命令)拖入層中。

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

         4、在彈出的Drag Layer對話方塊中採用預設選項,單擊OK按鈕。此時,Behaviors面板添加了onClick(單擊)事件和Drag Layer動作。

         5、儲存檔案,在瀏覽器中瀏覽,用滑鼠按住月曆即可在頁面中自由拖動。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.