[分享] 特效：在网页中显示可拖动的月历

使用本文提供的javascript脚本，配合Dreamweaver的层和行为的运用，可以在页面中显示可拖动的精美月历。# Q& f) d; h; O+ h7 L- N
' i2 V5 `% {/ X; `9 @2 Y5 S/ ~
      　　具体制作步骤如下：- x. O) O3 z; U/ a! T- @; ^" ?7 A

, b* D) w. ?4 Y      　　1、启动Dreamweaver MX，新建一个HTML文档，切换到代码视图，编写javascript脚本。
$ |' }$ ]) m9 w/ G
5 Z) d3 u. T1 D      　　(1)在HTML文档的< head>...< /head>插入下面的javascript脚本：2 J" W# B4 e$ l% Y' T
. R. r' r: o5 R3 f$ q
      　　< SCRIPT LANGUAGE="javascript" TYPE="text/javascript">5 f  b$ c5 w" {9 o, \- X( J: X5 L
　　//定义月历函数
( U0 P3 b. u  G, c6 o　　function calendar() {
: B/ P' C2 t2 @3 B　　var today = new Date(); //创建日期对象
6 G4 S" A( d3 O" r( H　　year = today.getYear(); //读取年份
$ \; ?1 Y! A5 S1 }　　thisDay = today.getDate(); //读取当前日6 s' t5 `7 a9 Q; r
* C% }- k) v3 _$ T
      　　//创建每月天数数组9 m1 D8 l% l( |) D8 Y
　　var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);% M7 E/ A3 w7 [, x
　　//如果是闰年，2月份的天数为29天
/ }% V8 Y, W: b( N. n; f　　if (((year % 4 == 0) &;amp;&;amp; (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;& l( d4 \4 B$ s  ?' e9 j6 f$ c# d
　　daysOfCurrentMonth = monthDays[today.getMonth()]; //从每月天数数组中读取当月的天数
; U, p6 \1 J; k, w; _5 P　　firstDay = today;//复制日期对象5 I% y" s* j/ R8 m: C2 Y8 I
　　firstDay.setDate(1); //设置日期对象firstDay的日为1号) i: B  e* d* \% W
　　startDay = firstDay.getDay(); //确定当月第一天是星期几, D: |$ R8 ?5 B& \. |. G! s

! ]+ ~- }6 F  i* w! e! _# b7 [7 a      　　//定义周日和月份中文名数组% l, X% ]3 d' b: u; A% J! d& P
　　var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
, t& o/ ?* C/ y" @　　var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");( k, H! B; J# E8 N
　　//创建日期对象
1 m! ]. e5 l0 }& b　　var newDate = new Date();
, j9 y3 E+ B: C& B
% [- P0 v. M, [      　　//创建表格
, l! \# P2 T5 @7 N3 M9 v　　document.write("< TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' ALIGN='CENTER' BGCOLOR='#0080FF'>")
* M0 z, C4 U! g8 q　　document.write("< TR>< TD>< table border='0' cellspacing='1' cellpadding='2' bgcolor='#88FF99'>");/ h( J4 [+ U. j- L( P
　　document.write("< TR>< th colspan='7' bgcolor='#C8E3FF'>");9 J4 Q* O- n* E( v3 n. w

, k/ y) d- Y  U/ h0 h7 i      　　//显示当前日期和周日
  M; M  q& N( ?) O) G　　document.writeln("< FONT STYLE='font-size:9pt;Color:#FF0000'>"   newDate.getYear()   "年"   monthNames[newDate.getMonth()]   " "   newDate.getDate()   "日 "   dayNames[newDate.getDay()]   "< /FONT>");* q! C9 l7 D+ Z, W" a4 v" }

4 M" q% r. N! d+ ?) v5 O      　　//显示月历表头
, v! p! c# H) c　　document.writeln("< /TH>< /TR>< TR>< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>日< /FONT>< /TH>");
9 D- d7 N5 B' O5 v8 V7 r　　document.writeln("< th bgcolor='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>一< /FONT>< /TH>");1 y5 b. h/ }) ~# h4 ^
　　document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>二< /FONT>< /TH>");
) K+ g6 O7 s* @6 d& u　　document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>三< /FONT>< /TH>");
  U8 h) f4 L/ b3 k" }! y8 u" X　　document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>四< /FONT>< /TH>");
. @( c" F, [2 r, m8 C# M! R　　document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>五< /FONT>< /TH>");
3 c2 R; ?' A4 c# U; h! g( X' F& \. y　　document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>六< /FONT>< /TH>");
  d7 d& v, l4 E& V　　document.writeln("< /TR>< TR>");' T$ `# J8 y1 B& [" G; r

7 F9 l) t" H! J- }      　　//显示每月前面的"空日"! ~. H* d9 q! ?: v1 ~7 T/ y3 {# e
　　column = 0;
% O  w8 _4 q) J　　for (i=0; i　　document.writeln("\n< TD>< FONT STYLE='font-size:9pt'> < /FONT>< /TD>");% S6 a7 Y+ ?) d  \/ v) [/ D
　　column  ;
6 L) Z* \# n6 |) g　　}
1 L) V3 e, b0 H
) N' N! S! a6 R- [& v      　　//如果是当前日就突出显示(红色)，否则正常显示(黑色)
: b! q! k& P6 Q. s- \( ~1 f: m　　for (i=1; i<=daysOfCurrentMonth; i  ) {
3 S( {5 c; Y9 q( \5 X3 N　　if (i == thisDay) {, `% k2 o3 P4 S4 V) c
　　document.writeln("< /TD>< TD ALIGN='CENTER'>< FONT STYLE='font-size:9pt;Color:#ff0000'>< B>"). \. F. z  m9 `, X- v4 Q
　　}
- z) G, K+ B! d. \　　else {* L# {" ^; \5 n' L& F* g1 J0 C0 i
　　document.writeln("< /TD>< TD BGCOLOR='#88FF99' ALIGN='CENTER'>< FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000'>");! i9 A5 |& D% T9 e. k9 s0 r' S
　　}  k& M' J0 {* v
　　document.writeln(i);
7 R% i8 X6 Y$ S& Y0 L　　if (i == thisDay) document.writeln("< /FONT>< /TD>")
7 V( t, e! ~8 p　　column  ;
6 t+ }& p8 A3 ]" H4 P/ N5 e　　if (column == 7) {% q5 z+ Q$ K' }! s
　　document.writeln("< TR>");# I8 e0 q0 |, a
　　column = 0;4 }2 q) b0 ^7 ]: ?
　　}
  q1 M3 Q& h! a4 }3 K　　}8 j' g# |2 ?7 T! Z" s4 m; a* U! ]
　　document.writeln("< TR>< TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>")! p( w' s9 k9 y
　　document.writeln("< FORM NAME='time' onSubmit='0'>< FONT STYLE='font-size:9pt;Color:#ffffff'>")
4 |& E2 Z+ x6 u" s" N8 c6 W6 ?5 V/ g2 e* q
      　　//显示当前时间# ~6 {  J( `1 z3 @- [$ S/ s9 `
　　document.writeln("当前时间:< INPUT TYPE='Text' NAME='textbox' ALIGN='TOP'>< /FONT>< /TD>< /TR>< /TABLE>")
" k) y$ U+ w& _　　document.writeln("< /TD>< /TR>< /TABLE>< /FORM>");+ H5 {, q; j" o" C* V0 i
　　}2 X/ f- S4 B: Q9 g2 B% P
　　< /SCRIPT>
* ^( c9 n# @0 i$ Z! f; P4 T- ?0 b+ M8 s0 t$ o9 N. j- u+ A
      < SCRIPT LANGUAGE="javascript">, }* m; r: @; h
　　//初始化控制变量
, p' ?" V* m2 a# X4 O9 `　　var timerID = null;  p! V" b9 h  Z8 a2 W, v0 h
　　var timerRunning = false;; k% ^4 P& T! w5 s" V
1 _# F; j* j. `; p2 z
      　　//定义时间显示函数, s2 D+ ~& W" @- I2 a6 D
　　function stoptime (){' o" \. y$ R# U
　　if(timerRunning)
: G* ^  u7 x. B) Q0 ?, X　　clearTimeout(timerID);
0 H9 J5 `/ }" h& Q7 B) Z- C　　timerRunning = false;}2 `; c& K/ k0 \- K: G6 X
: o" b$ F3 T( S
      　　//定义显示时间函数
( o( F& ]* v6 T9 s" j4 `. a! G　　function showtime () {
) N2 q0 x: j/ V$ N7 ?  x　　var newDate = new Date();* e: r8 @3 [' @$ {6 T" |! o
　　var hours = newDate.getHours();& A4 K  ]6 }) V" U* A' s/ O
　　var minutes = newDate.getMinutes();1 s5 {2 d& `9 x3 R
　　var seconds = newDate.getSeconds(); h7 I( l' U! z( q1 _9 @2 ]) {
　　var timeValue = " "   ((hours >12) ? hours -12 :hours)# P0 {. t" E" q( R0 a
　　timeValue  = ((minutes < 10) ? ":0" : ":")   minutes
' r; p7 A  S/ ~* F- A　　timeValue  = ((seconds < 10) ? ":0" : ":")   seconds8 g+ ?6 N+ i) R, ]
　　timeValue  = (hours >= 12) ? " 下午 " : " 上午 "4 o, h3 }; b  a9 L) ?- ~( y
　　document.time.textbox.value = timeValue;1 c' N  Y/ M+ i/ w" y" i4 t
　　timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示: N* k+ n7 H: e7 ^; Y, q
　　timerRunning = true;}
+ \% ?& x# y/ \! a( }* ?
- c. G& H+ C' d* Q3 t5 P' [      　　//显示当前时间
+ s- Y7 Y. v) Y" S1 \) v$ F/ n' Z　　function starttime () {! p6 d+ V" C* P4 B; }3 P! G
　　stoptime();
  |* x9 i$ K  q) Q3 G　　showtime();}: o5 `3 H% [% r# b% \0 {% k
　　< /SCRIPT>
" W. g9 p! Y. D8 @, F
. j: @1 Y  Z' U8 p& K      　　(2)在HTML文档正文< body>...< /body>中插入javascript脚本，并给< body>标记添加一些属性：8 B2 A8 S1 Y8 W6 W2 B( m

1 V$ V) ~0 W! d4 ?/ h      　　< BODY  TEXT="#000000" TOPMARGIN="0">
2 E5 w2 O! o! f( g　　< script language="javascript" type="text/javascript">2 A+ g9 a" C6 u  m8 l; _
　　calendar(); //显示月历
! t0 @3 P9 \+ L; H. a　　< /script>
& \0 Z- \: J0 v$ Z' ?! V' o　　< /BODY>
: t  v7 k( j# A9 `$ Z1 u$ s0 }6 u* z, P
      　　2、切换到设计视图，在页面中插入一层，并把代表HTML文档正文中的javascript脚本图标(如果该图标没有显示，请选择View>Visual Aids>Invisible Elements菜单命令)拖入层中，如下图所示。0 ]5 B, U" s$ `" }$ O, Q

2 A" M  |/ h4 h( @3 b' ~; `) Z* Y, O4 M

9 ]" f8 m% p& v1 [
7 b8 |% w3 N# }4 [7 z. B% o- z0 @5 \% d( _% y' m
　　3、选择页面中的层，然后在Behaviors(行为)面板(如果没有打开，选择Window>Behaviors)中单击" "按钮，从弹出的菜单上选择Drag Layer(拖动层)命令。
; m3 H3 B# U: M: ~9 I  u( L
; i1 K) W3 N2 w7 @( Q' ]- a3 n/ v. q
* C, N& _5 ^9 F, {- O2 g4 E* ^  J. a( O, L  O" g! |* V

5 m' n9 ?9 ~9 Z% Z7 S5 [/ m& d. i; k, z) x& _! T; S0 S: E
　　4、在弹出的Drag Layer对话框中采用默认选项，单击OK按钮。此时，Behaviors面板添加了onClick(单击)事件和Drag Layer动作。+ O9 O9 u5 d5 ?

" O- E/ j; d4 o: _, ?) o4 j
7 H2 S: }& l: ?; ?6 s2 @* g$ F' a" Z% R
7 R( v4 F: b9 l
" q$ I$ ^% w0 ~- P4 |$ ?' z
      　　5、保存文件，在浏览器中浏览，用鼠标按住月历即可在页面中自由拖动。
# Z# ~5 q& ^5 z5 E/ u2 J; p& V' x' O/ N# s" k
      　　怎么样，蛮酷吧？