首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

Javascript脚本特效示例：[19]日历生成器

2025-10-27 13:50:03

1、在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。

<html>

<head>

<title>晓博JavaScript特效测试</title>

</head>

<body>

<div id="zy">  

  <div id="login"></div>

  <div id="daohang">

  <ul>

  <li><a href="index.html">首页</a></li>

  <li><a href="jianjie.html">七夕简介</a></li>

  <li><a href="#">七夕节传说</a></li>

  <li><a href="#">七夕节习俗</a></li>

  <li><a href="#">诗词& 歌谣</a></li>

  <li><a href="#">七夕节寄语</a></li>

  </ul>

  </div>

</div>

</body>

</html>

Javascript脚本特效示例：[19]日历生成器

Javascript脚本特效示例：[19]日历生成器

2、第一步:把如下代码加入<head>区域中:

  <SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var dDate = new Date();

var dCurMonth = dDate.getMonth();

var dCurDayOfMonth = dDate.getDate();

var dCurYear = dDate.getFullYear();

var objPrevElement = new Object();

function fToggleColor(myElement) {

var toggleColor = "#ff0000";

if (myElement.id == "calDateText") {

if (myElement.color == toggleColor) {

myElement.color = "";

} else {

myElement.color = toggleColor;

   }

} else if (myElement.id == "calCell") {

for (var i in myElement.children) {

if (myElement.children[i].id == "calDateText") {

if (myElement.children[i].color == toggleColor) {

myElement.children[i].color = "";

} else {

myElement.children[i].color = toggleColor;

            }

         }

      }

   }

}

function fSetSelectedDay(myElement){

if (myElement.id == "calCell") {

if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {

myElement.bgColor = "#c0c0c0";

objPrevElement.bgColor = "";

document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);

objPrevElement = myElement;

      }

   }

}

function fGetDaysInMonth(iMonth, iYear) {

var dPrevDate = new Date(iYear, iMonth, 0);

return dPrevDate.getDate();

}

function fBuildCal(iYear, iMonth, iDayStyle) {

var aMonth = new Array();

aMonth[0] = new Array(7);

aMonth[1] = new Array(7);

aMonth[2] = new Array(7);

aMonth[3] = new Array(7);

aMonth[4] = new Array(7);

aMonth[5] = new Array(7);

aMonth[6] = new Array(7);

var dCalDate = new Date(iYear, iMonth-1, 1);

var iDayOfFirst = dCalDate.getDay();

var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);

var iVarDate = 1;

var i, d, w;

if (iDayStyle == 2) {

aMonth[0][0] = "Sunday";

aMonth[0][1] = "Monday";

aMonth[0][2] = "Tuesday";

aMonth[0][3] = "Wednesday";

aMonth[0][4] = "Thursday";

aMonth[0][5] = "Friday";

aMonth[0][6] = "Saturday";

} else if (iDayStyle == 1) {

aMonth[0][0] = "Sun";

aMonth[0][1] = "Mon";

aMonth[0][2] = "Tue";

aMonth[0][3] = "Wed";

aMonth[0][4] = "Thu";

aMonth[0][5] = "Fri";

aMonth[0][6] = "Sat";

} else {

aMonth[0][0] = "Su";

aMonth[0][1] = "Mo";

aMonth[0][2] = "Tu";

aMonth[0][3] = "We";

aMonth[0][4] = "Th";

aMonth[0][5] = "Fr";

aMonth[0][6] = "Sa";

}

for (d = iDayOfFirst; d < 7; d++) {

aMonth[1][d] = iVarDate;

iVarDate++;

}

for (w = 2; w < 7; w++) {

for (d = 0; d < 7; d++) {

if (iVarDate <= iDaysInMonth) {

aMonth[w][d] = iVarDate;

iVarDate++;

      }

   }

}

return aMonth;

}

function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {

var myMonth;

myMonth = fBuildCal(iYear, iMonth, iDayStyle);

document.write("<table border='1'>")

document.write("<tr>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");

document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");

document.write("</tr>");

for (w = 1; w < 7; w++) {

document.write("<tr>")

for (d = 0; d < 7; d++) {

document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");

if (!isNaN(myMonth[w][d])) {

document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");

} else {

document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>&nbsp;</font>");

}

document.write("</td>")

}

document.write("</tr>");

}

document.write("</table>")

}

function fUpdateCal(iYear, iMonth) {

myMonth = fBuildCal(iYear, iMonth);

objPrevElement.bgColor = "";

document.all.calSelectedDate.value = "";

for (w = 1; w < 7; w++) {

for (d = 0; d < 7; d++) {

if (!isNaN(myMonth[w][d])) {

calDateText[((7*w)+d)-7].innerText = myMonth[w][d];

} else {

calDateText[((7*w)+d)-7].innerText = " ";

         }

      }

   }

}

// End -->

</script>

3、第二步:把如下代码加入<body>区域中,并重名文档为HTML文件

<script language="JavaScript" for=window event=onload>

<!-- Begin

var dCurDate = new Date();

frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;

for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)

if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())

frmCalendarSample.tbSelYear.options[i].selected = true;

//  End -->

</script>

<form name="frmCalendarSample" method="post" action="">

<input type="hidden" name="calSelectedDate" value="">

<table border="1">

<tr>

<td>

<select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>

<option value="1">January</option>

<option value="2">February</option>

<option value="3">March</option>

<option value="4">April</option>

<option value="5">May</option>

<option value="6">June</option>

<option value="7">July</option>

<option value="8">August</option>

<option value="9">September</option>

<option value="10">October</option>

<option value="11">November</option>

<option value="12">December</option>

</select>

  

<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>

<option value="1998">1998</option>

<option value="1999">1999</option>

<option value="2000">2000</option>

<option value="2001">2001</option>

<option value="2002">2002</option>

<option value="2003">2003</option>

<option value="2004">2004</option>

</select>

</td>

</tr>

<tr>

<td>

<script language="JavaScript">

var dCurDate = new Date();

fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);

</script>

</td>

</tr>

</table>

</form>

4、用IE浏览器打开晓博JavaScript特效测试.html文件，可以看到日历生成器特效，如下图

Javascript脚本特效示例：[19]日历生成器

Javascript脚本特效示例：[19]日历生成器

Javascript脚本特效示例：[19]日历生成器

Javascript脚本特效示例：[19]日历生成器

Javascript脚本特效示例：[19]日历生成器

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
相关推荐
  • Javascript脚本特效示例：[32]日期显示
    阅读量：83
  • Javascript脚本特效示例：[31]倒影时钟
    阅读量：94
  • Javascript脚本特效示例：[29]可开关Form时钟
    阅读量：195
  • 使用css和JavaScript制作日历
    阅读量：30
  • Javascript脚本特效示例：[27]显示特殊节日
    阅读量：49
    • 猜你喜欢
    猜你喜欢
    © 2025 指南生活
    粤ICP备2022083104号