经典日历
1

<style type="text/css">
2

.body,td{
}{3
font-family:"Arial";4
font-size:8pt;5
color:#000000;6
}7

.TrOut{
}{8
background:#dddddd;9
height:26;10
border:1 solid #999999;11
border-top-color:#f4f4f4;12
border-left-color:#f4f4f4;13
}14

.TdOver{
}{15
background:#eeeeee;16
height:20;17
border:1 solid #ffffff;18
border-top-color:#9c9c9c;19
border-left-color:#9c9c9c;20
}21

.TdOut{
}{22
background:#eeeeee;23
height:20;24
border:1 solid #9c9c9c;25
border-top-color:#ffffff;26
border-left-color:#ffffff;27
}28
</style>29

<script language="JScript">
30

/**//*********************************************************31

32
函数 TableFunction 提供以下方法和属性:33

34
1.GetDateStr()35
返回指定年月的日期的数组,包括空字符.36
参数:37
y是指年38
m是指月39
调用方式:TableFunction().GetDateStr(Year,Month)40

41
2.GetTableStr()42
返回指定年月的已经格式化了的表格43
参数:44
y是指年45
m是指月46
调用方式:TableFunction().GetTableStr(Year,Month)47

48
3.WriteSelect()49
返回年月的选择框50
参数:51
obj是指需要加入选择框的容器52
values是指需要加亮的项目53
action是指参数,带入参数y表示是年选择框,带入参数m表示月选择框54
getobj是指在哪个控件上触发的事件,其中true为非当前选择框触发55
而false则为当前选择框触发56
调用方式:TableFunction().WriteSelect(obj,values,action,getobj)57

58
4.RewriteTableStr()59
复位重写表格中的日期60
参数:61
y是指年62
m是指月63
调用方式:TableFunction().RewriteTableStr(Year,Month)64

65
5.JumpToRun()66
左右控制表格中的月变化67
参数:68
action表示日历是前进还是后退69
调用方式:TableFunction().JumpToRun(action)70

71
6.AlertDay()72
提示当前点击的位置的日期73
参数:74
无75
调用方式:TableFunction().AlertDay()76
*********************************************************/77

function TableFunction()
{78

this.GetDateStr=function(y,m)
{79
this.DayArray=[];80
for(var i=0;i<42;i++)this.DayArray[i]=" ";81
for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1;82
return this.DayArray;83
}84

this.GetTableStr=function(y,m)
{85
this.DateArray=["日","一","二","三","四","五","六"];86
this.DStr="<table oncontextmenu='return false' onselectstart='return false' style='width:160;cursor:default;border:1 solid #9c9c9c;border-right:0;border-bottom:0;filter:progid:dximagetransform.microsoft.dropshadow(color=#e3e3e3,offx=3,offy=3,positive=true)' border='0' cellpadding='0' cellspacing='0'>\n"+87
"<tr><td colspan='7' class='TrOut'>"+88
"<table width='100%' height='100%'border='0' cellpadding='0' cellspacing='0'><tr align='center'>\n"+89
"<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"b\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>3</td>\n"+90
"<td id='YearTD' width='70' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"y\",false)'>"+y+" 年</td>\n"+91
"<td id='MonthTD' width='47' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"m\",false)'>"+m+" 月</td>\n"+92
"<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"n\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>4</td></tr></table>\n"+93
"</td></tr>\n"+94
"<tr align='center'>\n";95
for(var i=0;i<7;i++)96
this.DStr+="<td class='TrOut'>"+DateArray[i]+"</td>\n";97
this.DStr+="</tr>\n";98

for(var i=0;i<6;i++)
{99
this.DStr+="<tr align='center'>\n";100

for(var j=0;j<7;j++)
{101
var CS=new Date().getDate()==this.GetDateStr(y,m)[i*7+j]?"TdOver":"TdOut";102
this.DStr+="<td id='TD' class='"+CS+"' cs='"+CS+"' onmouseover='this.className=\"TdOver\"' onmouseout='if(this.cs!=\"TdOver\")this.className=\"TdOut\"' onclick='TableFunction().AlertDay()'>"+this.GetDateStr(y,m)[i*7+j]+"</td>\n";103
}104
this.DStr+="</tr>\n";105
}106
this.DStr+="</tabe>";107
return this.DStr;108
}109

this.WriteSelect=function(obj,values,action,getobj)
{110
if(values=="")return;111

if(getobj)
{112
obj.innerHTML=values+(action=="y"?" 年":" 月");113
this.RewriteTableStr(YearTD.innerText.split(" ")[0],MonthTD.innerText.split(" ")[0]);114
return false;115
}116
var StrArray=[];117

if(action=="y")
{118

for(var i=0;i<15;i++)
{119
var year=values-7+i;120
StrArray[i]="<option value='"+year+"' "+(values==year?"selected":"")+"> "+year+"年</option>\n";121
}122
obj.innerHTML="<select id='select1' style='width:67' onchange='TableFunction().WriteSelect(parentElement,this.value,\"y\",true)' onblur='YearTD.innerText=this.value+\" 年\"'>\n"+StrArray.join("")+"</select>";123
select1.focus();124
}125

if(action=="m")
{126
for(var i=1;i<13;i++)127
StrArray[i]="<option value='"+i+"' "+(i==values?"selected":"")+"> "+i+"月</option>\n";128
obj.innerHTML="<select id='select2' style='width:47' onchange='TableFunction().WriteSelect(parentElement,this.value,\"m\",true)' onblur='MonthTD.innerText=this.value+\" 月\"'>\n"+StrArray.join("")+"</select>";129
select2.focus();130
}131
}132

this.RewriteTableStr=function(y,m)
{133
var TArray=this.GetDateStr(y,m);134
var len=TArray.length;135

for(var i=0;i<len;i++)
{136
TD[i].innerHTML=TArray[i];137
TD[i].className="TdOut";138
TD[i].cs="TdOut";139

if(new Date().getYear()==y&&new Date().getMonth()+1==m&&new Date().getDate()==TArray[i])
{140
TD[i].className="TdOver";141
TD[i].cs="TdOver";142
}143
}144
}145

this.JumpToRun=function(action)
{146
var YearNO=YearTD.innerText.split(' ')[0];147
var MonthNO=MonthTD.innerText.split(' ')[0];148

if(action=="b")
{149

if(MonthNO=="1")
{150
MonthNO=13;151
YearNO=YearNO-1;152
}153
MonthTD.innerText=MonthNO-1+" 月";154
YearTD.innerText=YearNO+" 年";155
this.RewriteTableStr(YearNO,MonthNO-1);156
}157

if(action=="n")
{158

if(MonthNO=="12")
{159
MonthNO=0;160
YearNO=YearNO-(-1);161
}162
YearTD.innerText=YearNO+" 年";163
MonthTD.innerText=MonthNO-(-1)+" 月";164
this.RewriteTableStr(YearNO,MonthNO-(-1));165
}166
}167

this.AlertDay=function()
{168
if(event.srcElement.innerText!=" ")169
alert(YearTD.innerText.split(' ')[0]+"年"+MonthTD.innerText.split(' ')[0]+"月"+event.srcElement.innerText+"日");170
}171
return this;172
}173
document.write(TableFunction().GetTableStr(new Date().getYear(),new Date().getMonth()+1));174
</script>175

1

<Script LANGUAGE="JavaScript">
2
var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");3
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);4
var days = new Array("日","一", "二", "三","四", "五", "六");5
var classTemp;6
var today=new getToday();7
var year=today.year;8
var month=today.month;9
var newCal; 10

11

function getDays(month, year)
{12
if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;13
else return daysInMonth[month];14
}15

16

function getToday()
{17
this.now = new Date();18
this.year = this.now.getFullYear();19
this.month = this.now.getMonth();20
this.day = this.now.getDate();21
}22

23

function Calendar()
{24
newCal = new Date(year,month,1);25
today = new getToday(); 26
var day = -1;27
var startDay = newCal.getDay();28
var endDay=getDays(newCal.getMonth(), newCal.getFullYear());29
var daily = 0;30
if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))31

{32
day = today.day;33
}34
var caltable = document.all.caltable.tBodies.calendar;35
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());36

37
for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)38
for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)39

{40
var cell = caltable.rows[intWeek].cells[intDay];41
var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1); 42

if ((intDay == startDay) && (0 == daily))
{ daily = 1;}43
var daytemp=daily<10?("0"+daily):(daily);44
var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";45
if(day==daily) cell.className="DayNow";46
else if(intDay==6) cell.className = "DaySat";47
else if (intDay==0) cell.className ="DaySun";48
else cell.className="Day";49
if ((daily > 0) && (daily <= intDaysInMonth))50

{51
cell.innerText = daily;52
daily++;53
} else54

{55
cell.className="CalendarTD";56
cell.innerText = "";57
}58
}59
document.all.year.value=year;60
document.all.month.value=month+1;61
}62

63
function subMonth()64

{65
if ((month-1)<0)66

{67
month=11;68
year=year-1;69
} else70

{71
month=month-1;72
}73
Calendar();74
}75

76
function addMonth()77

{78
if((month+1)>11)79

{80
month=0;81
year=year+1;82
} else83

{84
month=month+1;85
}86
Calendar();87
}88

89
function setDate() 90

{91
if (document.all.month.value<1||document.all.month.value>12)92

{93
alert("月的有效范围在1-12之间!");94
return;95
}96
year=Math.ceil(document.all.year.value);97
month=Math.ceil(document.all.month.value-1);98
Calendar();99
}100
</Script>101

102

<Script>
103
function buttonOver()104


{105
var obj = window.event.srcElement;106
obj.runtimeStyle.cssText = "background-color:#FFFFFF";107
// obj.className="Hover";108
}109

110
function buttonOut()111


{112
var obj = window.event.srcElement;113

window.setTimeout(function()
{obj.runtimeStyle.cssText = "";},300);114
}115
</Script>116

117

<Style>
118

Input {
}{font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}119

120

.Calendar {
}{font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}121

.CalendarTD {
}{font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}122

123

.Title {
}{font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}124

125

.Day {
}{font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}126

.DaySat {
}{font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}127

.DaySun {
}{font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}128

.DayNow {
}{font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}129

130

.DayTitle {
}{font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}131

.DaySatTitle {
}{font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}132

.DaySunTitle {
}{font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}133

134

.DayButton {
}{font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}135

136
</Style>137

138
<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">139
<thead>140
<tr align="center" valign="middle"> 141
<td colspan="7" class="Title">142
<a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>143
</td>144
</tr>145
<tr align="center" valign="middle"> 146

<Script LANGUAGE="JavaScript">
147
document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); 148
for (var intLoop = 1; intLoop < days.length-1;intLoop++) 149
document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>"); 150
document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); 151
</Script>152
</TR> 153
</thead>154
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">155

<Script LANGUAGE="JavaScript">
156
for (var intWeeks = 0; intWeeks < 6; intWeeks++)157

{158
document.write("<TR style='cursor:hand'>");159
for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");160
document.write("</TR>");161
} 162
</Script>163
</TBODY>164
</TABLE>165

<Script LANGUAGE="JavaScript">
166
Calendar();167
</Script>168


浙公网安备 33010602011771号