熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2013-11-15 11:34:33  來源: JSP教程 
 使用本文提供的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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.