敬业的IT人 >> 网站建设 >> Web编程 >> JavaScript >> &#106avascript 实现日历式日期选择

&#106avascript 实现日历式日期选择

敬业的IT人互联网佚名 2008-1-10 16:54:05

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<title>Canlender--JavaScript</title>
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

</style>

</head>
<body>
<table border=0 cellpadding=0 cellspacing=0 width=180>
<tr><td id=cc>
</td></tr></table>
</body>
<script language=JavaScript>
function RunNian(The_Year)
{
if ((The_Year%400==0) || ((The_Year%4==0) && (The_Year%100!=0)))
  return true;
else
  return false;
}
function GetWeekday(The_Year,The_Month)
{

var Allday;
Allday = 0;
if (The_Year>2000)
{

  for (i=2000 ;i<The_Year; i++)
   if (RunNian(i))
    Allday += 366;
   else
    Allday += 365;
  for (i=2; i<=The_Month; i++)
  {
   switch (i)
   {
    case 2 :
     if (RunNian(The_Year))
      Allday += 29;
     else
      Allday += 28;
     break;
    case 3 : Allday += 31; break;
    case 4 : Allday += 30; break;
    case 5 : Allday += 31; break;
    case 6 : Allday += 30; break;
    case 7 : Allday += 31; break;
    case 8 : Allday += 31; break;
    case 9 : Allday += 30; break;
    case 10 : Allday += 31; break;
    case 11 : Allday += 30; break;
    case 12 : Allday += 31; break;

   }

  }
}

return (Allday+6)%7;

}

function chooseday(The_Year,The_Month,The_Day)
{
var Firstday;
var completely_date;
if (The_Day!=0)
completely_date = The_Year + - + The_Month + - + The_Day;
else
completely_date = No Choose;
//showdate 只是一个为了显示而采用的东西，
//如果外部想引用这里的时间，可以通过使用 completely_date引用完整日期
//也可以通过The_Year,The_Month,The_Day分别引用年，月，日
//当进行月份和年份的选择时，认为没有选择完整的日期
showdate.innerText = completely_date;
Firstday = GetWeekday(The_Year,The_Month);
ShowCalender(The_Year,The_Month,The_Day,Firstday);

}

function nextmonth(The_Year,The_Month)
{
if (The_Month==12)
chooseday(The_Year+1,1,0);
else
chooseday(The_Year,The_Month+1,0);
}

function prevmonth(The_Year,The_Month)
{
if (The_Month==1)
chooseday(The_Year-1,12,0);
else
chooseday(The_Year,The_Month-1,0);
}

function prevyear(The_Year,The_Month)
{
chooseday(The_Year-1,The_Month,0);
}

function nextyear(The_Year,The_Month)
{
chooseday(The_Year+1,The_Month,0);
}

function ShowCalender(The_Year,The_Month,The_Day,Firstday)
{

var showstr;
var Month_Day;
var ShowMonth;
var today;
today = new Date();

switch (The_Month)
{
  case 1 : ShowMonth = January; Month_Day = 31; break;
  case 2 :
   ShowMonth = February;
   if (RunNian(The_Year))
    Month_Day = 29;
   else
    Month_Day = 28;
   break;
  case 3 : ShowMonth = March; Month_Day = 31; break;
  case 4 : ShowMonth = April; Month_Day = 30; break;
  case 5 : ShowMonth = May; Month_Day = 31; break;
  case 6 : ShowMonth = June; Month_Day = 30; break;
  case 7 : ShowMonth = July; Month_Day = 31; break;
  case 8 : ShowMonth = August; Month_Day = 31; break;
  case 9 : ShowMonth = September; Month_Day = 30; break;
  case 10 : ShowMonth = October; Month_Day = 31; break;
  case 11 : ShowMonth = November; Month_Day = 30; break;
  case 12 : ShowMonth = December; Month_Day = 31; break;

}

showstr = ;
showstr = <Table cellpadding=0 cellspacing=0 border=1 bordercolor=#999999 width=95% align=center valign=top>;
showstr += <tr><td width=0 style=cursor:hand onclick=prevyear(+The_Year+, + The_Month + )><<</td><td width=0>  + The_Year +  </td><td width=0 onclick=nextyear(+The_Year+,+The_Month+) style=cursor:hand>>></td><td width=0 style=cursor:hand onclick=prevmonth(+The_Year+,+The_Month+)><<</td><td width=100 align=center> + ShowMonth + </td><td width=0 onclick=nextmonth(+The_Year+,+The_Month+) style=cursor:hand>>></td></tr>;
showstr += <tr><td align=center width=100% colspan=6>;
showstr += <table cellpadding=0 cellspacing=0 border=1 bordercolor=#999999 width=100%>;
showstr += <Tr align=center bgcolor=#999999> ;
    showstr += <td><strong><font color=#0000CC>日</font></strong></td>;
    showstr += <td><strong><font color=#0000CC>一</font></strong></td>;
    showstr += <td><strong><font color=#0000CC>二</font></strong></td>;
    showstr += <td><strong><font color=#0000CC>三</font></strong></td>;
    showstr += <td><strong><font color=#0000CC>四</font></strong></td>;
    showstr += <td><strong><font color=#0000CC>五</font></strong></td>;
    showstr += <td><strong><font color=#0000CC>六</font></strong></td>;
showstr += </Tr><tr>;

for (i=1; i<=Firstday; i++)
  showstr += <Td align=center bgcolor=#CCCCCC> </Td>;

for (i=1; i<=Month_Day; i++)
{
  if ((The_Year==today.getYear()) && (The_Month==today.getMonth()+1) && (i==today.getDate()))
   bgColor = #FFCCCC;
  else
   bgColor = #CCCCCC;

  if (The_Day==i) bgColor = #FFFFCC;
  showstr += <td align=center bgcolor= + bgColor + style=cursor:hand onclick=chooseday( + The_Year + , + The_Month + , + i + )> + i + </td>;
  Firstday = (Firstday + 1)%7;
  if ((Firstday==0) && (i!=Month_Day)) showstr += </tr><tr>;
}
if (Firstday!=0)
{
  for (i=Firstday; i<7; i++)
   showstr += <td align=center bgcolor=#CCCCCC> </td>;
  showstr += </tr>;
}

showstr += </tr></table></td></tr></table>;
cc.innerHTML = showstr;

}

</script>

var The_Year,The_Day,The_Month;
var today;
var Firstday;
today = new Date();
The_Year = today.getYear();
The_Month = today.getMonth() + 1;
The_Day = today.getDate();
Firstday = GetWeekday(The_Year,The_Month);
ShowCalender(The_Year,The_Month,The_Day,Firstday);
</script>
<div id=showdate></div>
</html>

最新文章: 卷帘一样的文字显示效果，为你的网页增加不少生色哦！[01-10]; 在网页中调用本地的应用程序！！！！[01-10]; “陷阱”病毒源代码大揭密[01-10]; &#106avascript修改注册表[01-10]; &#106avascript中的正则表达式(1)[01-10]; &#106avascript中的正则表达式(2)[01-10]

相关文章