当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > 在网页中显示可拖动月历

Dreamweaver
用代码“写”出扫描线效果图片
DHTML实例解析:用HTC统一定制表单样式
网页瘦身小技巧---“分割大法”
简单实用的网页表格特效
巧用样式表,让文本框与按钮变个样
网页工作原理
网页图片特效小技巧
如何防止及消除垃圾代码的产生
提高页面显示速度的秘技
用DW MX制作导航下拉菜单
Dreamweaver MX应用表格排序
Dreamweaver查找替换的技巧
用DreamWeaver定制网站的颜色
Dreamweaver MX进阶教程(七)创建基于框架的网页
Dreamweaver MX进阶教程(九)使用用于框架的“行为”
Dreamweaver MX进阶教程(八) 操作框架
Dreamweaver MX进阶教程(十)制作居中的网页
Dreamweaver MX进阶教程(十六)制作可拖动表格
Dreamweaver MX进阶教程(二十一)制作虚线
Dreamweaver MX进阶教程(十三)在Dreamweaver 中使用上标和下标

Dreamweaver 中的 在网页中显示可拖动月历


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 72 ::
收藏到网摘: n/a

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

具体制作步骤如下:

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 = 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  document.writeln("\n< TD>< FONT STYLE='font-size:9pt'> < /FONT>< /TD>");
  column++;
  }

//如果是当前日就突出显示(红色),否则正常显示(黑色)
  for (i=1; i<=daysOfCur