网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 日期时间 >> 正文
最新文章
· Js简单获取系统日期/时间/星期
· 小巧实用的日历
· Js日期选择并自动加入输入框
· 可开始暂停停止的js计时器
· JavaScript日历生成器
· 动态显示当前时间并显示当前是上午还
· 中英文双语日期选择器
· 非常好用的JS日历控件ESONCalendar
· 简单的日期时间控件
· 简洁漂亮的JS日历控件代码
热门文章
 可开始暂停停止的js计时器
 可精确到分钟的js日期时间控件
 基于JQuery的日历控件
 JavaScript动态显示系统时间(带年
 一个可精确到时分秒的日期时间控件
 距离某年某月某日还有多少天
 日期时间控件My97 DatePicker 4.7 
 非常好用的JS日历控件ESONCalendar
 简洁漂亮的JS日历控件代码
 精确到毫秒的动态时间显示
相关文章
小巧实用的日历
简洁漂亮的JS日历控件代码
很漂亮实用的日历
JavaScript日历生成器
来源:源码爱好者 更新时间:2011/1/9 2:19:33 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<HTML>
<HEAD>
<TITLE>日历生成器</TITLE>
</HEAD><BODY bgcolor="#fef4d2" background="../images/background3.jpg" >
<br>
<br>
<center>
<font color="ffaafa">
  <h2><font color="#FF0000"><b>时间日期篇--日历生成器</b></font></h2>
  </font> 
  <hr width=300>
<br><br>
<SCRIPT LANGUAGE="JavaScript">
var dDate = new Date();
var dCurMonth = dDate.getMonth();
var dCurDayOfMonth = dDate.getDate();
var dCurYear = dDate.getFullYear();
var objPrevElement = new Object();

function TToggleColor(myElement) {
var toggleColor = "#ff0000";
if (myElement.id == "calendarDate") {
if (myElement.color == toggleColor) {
myElement.color = "";
} else {
myElement.color = toggleColor;
   }
} else if (myElement.id == "calendarCell") {
for (var i in myElement.children) {
if (myElement.children[i].id == "calendarDate") {
if (myElement.children[i].color == toggleColor) {
myElement.children[i].color = "";
} else {
myElement.children[i].color = toggleColor;
         }   }   }  }  }
function TSetSelectedDay(myElement){
if (myElement.id == "calendarCell") {
if (!isNaN(parseInt(myElement.children["calendarDate"].innerText))) {
myElement.bgColor = "#c0c0c0";
objPrevElement.bgColor = "";
document.all.calSelectedDate.value = parseInt(myElement.children["calendarDate"].innerText);
objPrevElement = myElement;
      }   }  }
function TGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
function TBuildCal(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 = TGetDaysInMonth(iMonth, iYear);
var iVarDate = 1;
var i, d, w;
if (iDayStyle == 2) {
aMonth[0][0] = "星期日";
aMonth[0][1] = "星期一";
aMonth[0][2] = "星期二";
aMonth[0][3] = "星期三";
aMonth[0][4] = "星期四";
aMonth[0][5] = "星期五";
aMonth[0][6] = "星期六";
} else if (iDayStyle == 1) {
aMonth[0][0] = "周日";
aMonth[0][1] = "周一";
aMonth[0][2] = "周二";
aMonth[0][3] = "周三";
aMonth[0][4] = "周四";
aMonth[0][5] = "周五";
aMonth[0][6] = "周六";
} else {
aMonth[0][0] = "日";
aMonth[0][1] = "一";
aMonth[0][2] = "二";
aMonth[0][3] = "三";
aMonth[0][4] = "四";
aMonth[0][5] = "五";
aMonth[0][6] = "六";
}
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 TDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
var myMonth;
myMonth = TBuildCal(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='TToggleColor(this)' onMouseOut='TToggleColor(this)' onclick=TSetSelectedDay(this)>");
if (!isNaN(myMonth[w][d])) {
document.write("<font id=calendarDate onMouseOver='TToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='TToggleColor(this)' onclick=TSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
} else {
document.write("<font id=calendarDate onMouseOver='TToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='TToggleColor(this)' onclick=TSetSelectedDay(this)> </font>");
}
document.write("</td>")
}
document.write("</tr>");
}
document.write("</table>")
}
function TUpdateCal(iYear, iMonth) {
myMonth = TBuildCal(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])) {
calendarDate[((7*w)+d)-7].innerText = myMonth[w][d];
} else {
calendarDate[((7*w)+d)-7].innerText = " ";
         }
      }
   }
}
</script>
<script language="JavaScript" for=window event=onload>
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;
</script>

<form name="frmCalendarSample" method="post" action="">
<input type="hidden" name="calSelectedDate" value="">
<table border="1">
<tr>
<td>
<select name="tbSelMonth" onchange='TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<!-- [Step1]: 这里可以改变月份 -->
<option value="1"> 1月</option>
<option value="2"> 2月</option>
<option value="3"> 3月</option>
<option value="4"> 4月</option>
<option value="5"> 5月</option>
<option value="6"> 6月</option>
<option value="7"> 7月</option>
<option value="8"> 8月</option>
<option value="9"> 9月</option>
<option value="10">10月</option>
<option value="11">11月</option>
<option value="12">12月</option>
</select>
  
<select name="tbSelYear" onchange='TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<!-- [Step2]: 这里可以改变年份 -->
<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>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</select>
</td>
</tr>
<tr>
<td>
<script language="JavaScript">
var dCurDate = new Date();
TDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
</script>
</td>
</tr>
</table>
</form>
</center></BODY>
</HTML>

△运行 ☉预览 #复制 +收藏
特效说明:

  JavaScript 时间日期篇--日历生成器,自己写的日历哦,虽然样子不怎么样,但是从中学习到了不少的js技巧,希望大家也喜欢哦。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号