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

liangjj

新手上路

Rank: 1

UID: 1615
帖子: 14
精华: 0
积分: 8
贡献: 0
云币: 425 云币
阅读权限: 10

发短消息
加为好友
当前离线

1^# 大中小发表于 2008-4-17 08:12 只看该作者

特效：在网页中显示可拖动的月历

使用本文提供的javascript脚本，配合dreamweaver的层和行为的运用，可以在页面中显示可拖动的精美月历。 5 }, g. a( \& \. K  t  t* P6 b
具体制作步骤如下：
1、启动dreamweaver mx，新建一个html文档，切换到代码视图，编写javascript脚本。3 E$ Z& _  ~( W# I  s, l
(1)在html文档的< head>...< /head>插入下面的javascript脚本：$ Q0 l; g8 E# ]* a
< script language="javascript" type="text/javascript">
　　//定义月历函数
　　function calendar() {
　　var today = new date(); //创建日期对象2 G1 T& L! A/ t9 p
　　year = today.getyear(); //读取年份& n/ S4 G6 x+ m$ }, T8 M0 Z3 E
　　thisday = today.getdate(); //读取当前日' z' v3 m% }" U6 ?9 U
//创建每月天数数组
　　var monthdays = new array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);3 B0 E0 h+ X1 O: s# ?
　　//如果是闰年，2月份的天数为29天/ g  Z% {$ \7 L8 C3 o9 Z5 y% ]$ L/ y: v
　　if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthdays[1] = 29;
　　daysofcurrentmonth = monthdays[today.getmonth()]; //从每月天数数组中读取当月的天数5 o- Z) t% n! {: @: s
　　firstday = today;//复制日期对象8 @; K6 I, U5 [+ J6 s5 i- R% s( M
　　firstday.setdate(1); //设置日期对象firstday的日为1号
　　startday = firstday.getday(); //确定当月第一天是星期几
//定义周日和月份中文名数组7 M6 A4 \( ~$ x/ y- V1 s* v
　　var daynames = new array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
　　var monthnames = new array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");; }  x! ~( z& w$ `8 W
　　//创建日期对象( M" _' ]" }* Y. l: m
　　var newdate = new date();
//创建表格& P0 F0 S4 ^- M, o( n. K; y1 t( Y
1 F; V; e' P9 H  j
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'>");5 M' ^9 Z* K) n* \8 M
　　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>");, h1 i2 s6 V: j/ y9 S& ?2 k4 t
//显示月历表头! S: e0 Z9 p: t5 h3 Q$ c+ c
document.writeln("< /th>< /tr>< tr>< th bgcolor='#0080ff'>< font style='font-size:9pt;color:white'>日< /font>< /th>");2 |6 f$ w2 V0 G: Y- e8 J
document.writeln("< th bgcolor='#0080ff'>< font style='font-size:9pt;color:white'>一< /font>< /th>");% l7 u' e' P$ n! o$ t
document.writeln("< th bgcolor='#0080ff'>< font style='font-size:9pt;color:white'>二< /font>< /th>");4 j$ r+ \1 _! k9 b' K2 s; G3 a  t
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>");4 @9 F; s: X# F! o9 `# X1 Z
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>");/ q0 a4 H1 {6 A# U! ^
document.writeln("< /tr>< tr>");
//显示每月前面的"空日"  t; L+ e# I9 l8 d
　　column = 0;
　　for (i=0; i　　document.writeln("\n< td>< font style='font-size:9pt'> < /font>< /td>");& D4 B  p' K0 {! K6 p9 W/ U( O
　　column++;
　　}
//如果是当前日就突出显示(红色)，否则正常显示(黑色)
　　for (i=1; i<=daysofcurrentmonth; i++) {
　　if (i == thisday) {8 Q" c4 ^/ u7 @$ Z  ^, W2 ?
　　document.writeln("< /td>< td align='center'>< font style='font-size:9pt;color:#ff0000'>< b>")
　　}
　　else {$ t. S5 R% o  R! E( B9 q
　　document.writeln("< /td>< td bgcolor='#88ff99' align='center'>< font style='font-size:9pt;font-family:arial;font-weight:bold;color:#000000'>");
　　}8 ]2 D2 C) q6 [3 G; {
　　document.writeln(i);
　　if (i == thisday) document.writeln("< /font>< /td>")
　　column++;
　　if (column == 7) {
　　document.writeln("< tr>");
　　column = 0;. q4 q) `5 @. Z
　　}% W1 S0 E  Y$ Q# O
　　}
　　document.writeln("< tr>< td colspan='7' align='center' valign='top' bgcolor='#0080ff'>")6 N8 q/ {  @% d+ i5 j" x7 g' L
　　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>"); Q* l6 l  y9 v& U
　　document.writeln("< /td>< /tr>< /table>< /form>");2 a5 U; W1 R( M8 C  O
　　}  I# \6 H. a6 Q8 R  M' r2 Q8 L/ ~
　　< /script>7 \' }! z4 ?5 x  g4 B+ Y% n
< script language="javascript"># n$ K# {0 b6 g
　　//初始化控制变量
　　var timerid = null;1 |& T( c- i# q# a& J; S
　　var timerrunning = false;
//定义时间显示函数+ s. l' W- `. \$ W6 G& |
　　function stoptime (){
　　if(timerrunning)8 P/ z+ P7 P1 q
　　cleartimeout(timerid);9 F- E& y8 A7 I4 {( E1 Y
　　timerrunning = false;}
//定义显示时间函数
　　function showtime () {
　　var newdate = new date();
　　var hours = newdate.gethours();
　　var minutes = newdate.getminutes();) U1 o2 s! ^9 L9 n0 u# @4 A+ g7 S; A
　　var seconds = newdate.getseconds()
　　var timevalue = " " + ((hours >12) ? hours -12 :hours)" {/ \( |3 V, W( r! C8 n, ~8 }2 X1 |
　　timevalue += ((minutes < 10) ? ":0" : ":") + minutes: u8 @8 n" k- q
　　timevalue += ((seconds < 10) ? ":0" : ":") + seconds3 S8 M# I) H8 T
　　timevalue += (hours >= 12) ? " 下午 " : " 上午 "
　　document.time.textbox.value = timevalue;$ n- \, F7 ~' `6 F& o; }
　　timerid = settimeout("showtime()",1000);//设置超时,使时间动态显示; c4 \& w" K/ y: k+ w
　　timerrunning = true;}0 V$ e! n4 [* }3 L, \
//显示当前时间
　　function starttime () {
　　stoptime();
　　showtime();}
　　< /script>5 i. U; \. S* T3 S' Y6 y; \' s
(2)在html文档正文< body>...< /body>中插入javascript脚本，并给< body>标记添加一些属性：  k) J+ b( f% x
< body onload="starttime()" text="#000000" topmargin="0">
　　< script language="javascript" type="text/javascript">
　　calendar(); //显示月历
　　< /script>
　　< /body>/ m# b8 I7 l" x* ?
2、切换到设计视图，在页面中插入一层，并把代表html文档正文中的javascript脚本图标(如果该图标没有显示，请选择view>visual aids>invisible elements菜单命令)拖入层中，如下图所示。+ P  b# Q) t  G5 m0 T+ u5 c

{8 Q4 Q% z) o4 F$ |3 ?
3、选择页面中的层，然后在behaviors(行为)面板(如果没有打开，选择window>behaviors)中单击"+"按钮，从弹出的菜单上选择drag layer(拖动层)命令。

" D% g1 W6 t# S! F/ [
4、在弹出的drag layer对话框中采用默认选项，单击ok按钮。此时，behaviors面板添加了onclick(单击)事件和drag layer动作。

% f5 L+ S4 T( k S; i* \% ? A9 p
5、保存文件，在浏览器中浏览，用鼠标按住月历即可在页面中自由拖动。% [- h, T3 ^+ o3 I* @+ \' i- X
怎么样，蛮酷吧？

TOP

‹‹ 上一主题 | 下一主题 ››