您当前位置:网站首页 >> 编程开发 >> JavaScript >> 用JavaScript在网页中显示可拖动月历

用JavaScript在网页中显示可拖动月历

2013-10-16 19:59:38 来源:奇库斯(QCOOLS) 浏览:212
关键字:JavaScript,网页,显示,可拖动,月历

内容提要:

使用本文提供的JavaScript脚本,配合Dreamweaver的层和行为的运用,可以在页面中显示可拖动的精美月历。
具体制作步骤如下:
1、启动Dreamweaver MX,新建一个HTML文档,切换到代码视图,编写JavaScript脚本。
  (1)在HTML文档的<hea

  使用本文提供的JavaScript脚本,配合Dreamweaver的层和行为的运用,可以在页面中显示可拖动的精美月历。

  具体制作步骤如下:

  1、启动Dreamweaver MX,新建一个HTML文档,切换到代码视图,编写JavaScript脚本。

  (1)在HTML文档的<head>...</head>插入下面的JavaScript脚本:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><BR>//定义月历函数<BR>function calendar() {<BR>var today = new Date(); //创建日期对象<BR>year = today.getYear(); //读取年份<BR>thisDay = today.getDate(); //读取当前日<BR><BR>//创建每月天数数组<BR>var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);<BR>//如果是闰年,2月份的天数为29天<BR>if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;<BR>daysOfCurrentMonth = monthDays[today.getMonth()]; //从每月天数数组中读取当月的天数<BR>firstDay = today;//复制日期对象<BR>firstDay.setDate(1); //设置日期对象firstDay的日为1号<BR>startDay = firstDay.getDay(); //确定当月第一天是星期几<BR><BR>//定义周日和月份中文名数组<BR>var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");<BR>var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");<BR>//创建日期对象<BR>var newDate = new Date();<BR><BR>//创建表格<BR>document.write("<TABLE BORDER=´0´ CELLSPACING=´0´ CELLPADDING=´2´ ALIGN=´CENTER´ BGCOLOR=´#0080FF´>")<BR>document.write("<TR><TD><table border=´0´ cellspacing=´1´ cellpadding=´2´ bgcolor=´#88FF99´>");<BR>document.write("<TR><th colspan=´7´ bgcolor=´#C8E3FF´>");<BR><BR>//显示当前日期和周日<BR>document.writeln("<FONT STYLE=´font-size:9pt;Color:#FF0000´>" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + "</FONT>");<BR><BR>//显示月历表头<BR>document.writeln("</TH></TR><TR><TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>日</FONT></TH>");<BR>document.writeln("<th bgcolor=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>一</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>二</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>三</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>四</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>五</FONT></TH>");<BR>document.writeln("<TH BGCOLOR=´#0080FF´><FONT STYLE=´font-size:9pt;Color:White´>六</FONT></TH>");<BR>document.writeln("</TR><TR>");<BR><BR>//显示每月前面的"空日"<BR>column = 0;<BR>for (i=0; i<startDay; i++) {<BR>document.writeln(" <TD><FONT STYLE=´font-size:9pt´> </FONT></TD>");<BR>column++;<BR>}<BR><BR>//如果是当前日就突出显示(红色),否则正常显示(黑色)<BR>for (i=1; i<=daysOfCurrentMonth; i++) {<BR>if (i == thisDay) {<BR>document.writeln("</TD><TD ALIGN=´CENTER´><FONT STYLE=´font-size:9pt;Color:#ff0000´><B>")<BR>}<BR>else {<BR>document.writeln("</TD><TD BGCOLOR=´#88FF99´ ALIGN=´CENTER´><FONT STYLE=´font-size:9pt;font-family:Arial;font-weight:bold;Color:#000000´>");<BR>}<BR>document.writeln(i);<BR>if (i == thisDay) document.writeln("</FONT></TD>")<BR>column++;<BR>if (column == 7) {<BR>document.writeln("<TR>");<BR>column = 0;<BR>}<BR>}<BR>document.writeln("<TR><TD COLSPAN=´7´ ALIGN=´CENTER´ VALIGN=´TOP´ BGCOLOR=´#0080FF´>")<BR>document.writeln("<FORM NAME=´time´ onSubmit=´0´><FONT STYLE=´font-size:9pt;Color:#ffffff´>")<BR><BR>//显示当前时间<BR>document.writeln("当前时间:<INPUT TYPE=´Text´ NAME=´textbox´ ALIGN=´TOP´></FONT></TD></TR></TABLE>")<BR>document.writeln("</TD></TR></TABLE></FORM>");<BR>}<BR></SCRIPT><BR><BR><SCRIPT LANGUAGE="JavaScript"><BR>//初始化控制变量<BR>var timerID = null;<BR>var timerRunning = false;<BR><BR>//定义时间显示函数<BR>function stoptime (){<BR>if(timerRunning)<BR>clearTimeout(timerID);<BR>timerRunning = false;}<BR><BR>//定义显示时间函数<BR>function showtime () {<BR>var newDate = new Date();<BR>var hours = newDate.getHours();<BR>var minutes = newDate.getMinutes();<BR>var seconds = newDate.getSeconds()<BR>var timeValue = " " + ((hours >12) ? hours -12 :hours)<BR>timeValue += ((minutes < 10) ? ":0" : ":") + minutes<BR>timeValue += ((seconds < 10) ? ":0" : ":") + seconds<BR>timeValue += (hours >= 12) ? " 下午 " : " 上午 "<BR>document.time.textbox.value = timeValue;<BR>timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示<BR>timerRunning = true;}<BR><BR>//显示当前时间<BR>function starttime () {<BR>stoptime();<BR>showtime();}<BR></SCRIPT><BR>

(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、保存文件,在浏览器中浏览,用鼠标按住月历即可在页面中自由拖动。

  怎么样,蛮酷吧?



相关文章
发表评论
网名:
评论:
验证:
共有0人对本文发表评论查看所有评论(仅供表达个人看法,并不表明本站同意其观点或证实其描述)
赞助商链接
点击排行