<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 简单万年历 </title>
<script language="javascript">
<!--
//构造Date对象,并返回当前的年月日
var dDate = new Date();
var dCurMonth = dDate.getMonth();
var dCurDayOfMonth = dDate.getDate();
var dCurYear = dDate.getFullYear();
//创建Object对象
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);
//设置星期的显示方式
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";
}
//构造日期函数
var dCalDate = new Date(iYear , iMonth-1 ,1 );
var iDayOfFirst = dCalDate.getDay(); //返回星期值
//返回这个月中的第几天值
var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
var iVarDate = 1;
var i,d,w;
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<6 ;w++ ){
document.write("<tr>");
for (d=0 ;d<7 ;d++ ){
document.write("<td align='center' valign='top' width='"+iCellWidth+"' height='"+iCellHeight+"' id='calCell' style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)>");
if(!isNaN(myMonth[w][d])){
document.write("<font id='calDateText' style='CURSOR:Hand ; FONT+FAMILY:Arial ; FONT-SIZE:"+sDateTextSize+";FONT-WEIGHT:"+sDateTextWeight+"' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
}else{
document.write("<font id='calDateText' style='CURSOR:Hand ; FONT+FAMILY:Arial ; FONT-SIZE:"+sDateTextSize+";FONT-WEIGHT:"+sDateTextWeight+"' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)> </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<6 ;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 = "";
}
}
}
}
-->
</script>
</head>
<body bgcolor="f9fcff">
<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" οnchange='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" οnchange='fUpdateCal(frmCalendarSample.tbSelYear.value,frmCalendarSample.tbSelMonth.value)'>
<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>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
</td>
</tr>
<tr>
<td>
<script language="javascript">
var dCurDate = new Date(); //构造当前Date对象
//调用fDrawCal函数,在页面中显示当前日期的日历
fDrawCal(dCurDate.getFullYear(),dCurDate.getMonth()+1,30,30,"12px","bold",1);
</script>
</td>
</tr>
</table>
</form>
</body>
</html>
javascript简易万年历
最新推荐文章于 2018-08-27 16:24:22 发布