码迷，mamicode.com
首页 > Web开发 > 详细

html编写的日历

时间：2014-08-19 18:45:25      阅读：308      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   color   java   os   io   strong   

1、html

(1)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>日历</title>
</head>

<body>
 

<style>
<!--
.tablinks a, .tablinks a:visited{
color:blue
}

.tablinks a:hover{
color:brown
}
-->
</style>
<script language="JavaScript">
var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array(‘January‘, ‘February‘, ‘March‘, ‘April‘, ‘May‘, ‘June‘, ‘July‘, ‘August‘, ‘September‘, ‘October‘, ‘November‘, ‘December‘);

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

   if (Month == 1) {
   Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
   }
   var Header_String = Month_Label[Month] + ‘ ‘ + Year;
   return Header_String;
}

function Make_Calendar(Year, Month) {
   var First_Date = new Date(Year, Month, 1);
   var Heading = Header(Year, Month);
   var First_Day = First_Date.getDay() + 1;
   if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
       ((Days_in_Month[Month] == 30) && (First_Day == 7))) {
      var Rows = 6;
   }
   else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
      var Rows = 4;
   }
   else {
      var Rows = 5;
   }

   var HTML_String = ‘<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">‘;

   HTML_String += ‘<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">‘ + Heading + ‘</font></th></tr>‘;

   HTML_String += ‘<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>‘;

   HTML_String += ‘<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>‘;

   var Day_Counter = 1;
   var Loop_Counter = 1;
   for (var j = 1; j <= Rows; j++) {
      HTML_String += ‘<tr ALIGN="left" VALIGN="top">‘;
      for (var i = 1; i < 8; i++) {
         if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
            if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
               HTML_String += ‘<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">‘ + Day_Counter + ‘</font></strong></td>‘;
            }
            else {
               HTML_String += ‘<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">‘ + Day_Counter + ‘</td>‘;
            }
            Day_Counter++;
         }
         else {
            HTML_String += ‘<td BORDERCOLOR="C0C0C0"> </td>‘;
         }
         Loop_Counter++;
      }
      HTML_String += ‘</tr>‘;
   }
   HTML_String += ‘</table></td></tr></table>‘;
   cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
   cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
   if ((event.keyCode < 48) || (event.keyCode > 57)) {
      return false;
   }
}

function On_Year() {
   var Year = document.when.year.value;
   if (Year.length == 4) {
      Selected_Month = document.when.month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
}

function On_Month() {
   var Year = document.when.year.value;
   if (Year.length == 4) {
      Selected_Month = document.when.month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
   else {
      alert(‘Please enter a valid year.‘);
      document.when.year.focus();
   }
}


function Defaults() {
   if (!ie4&&!ns6)
   return
   var Mid_Screen = Math.round(document.body.clientWidth / 2);
   document.when.month.selectedIndex = Current_Month;
   document.when.year.value = Current_Year;
   Selected_Month = Current_Month;
   Selected_Year = Current_Year;
   Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
   if (Direction == ‘+‘) {
      if (Selected_Month == 11) {
         Selected_Month = 0;
         Selected_Year++;
      }
      else {
         Selected_Month++;
      }
   }
   else {
      if (Selected_Month == 0) {
         Selected_Month = 11;
         Selected_Year--;
      }
      else {
         Selected_Month--;
      }
   }
   Make_Calendar(Selected_Year, Selected_Month);
   document.when.month.selectedIndex = Selected_Month;
   document.when.year.value = Selected_Year;
}


</script>
<body onLoad="Defaults()">

<p><div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
<form name="when"><table>
<tr>
<td><input type="button" value="<-- Last" onClick="Skip(‘-‘)"></td>
<td> </td>
<td><select name="month" onChange="On_Month()">
<script language="JavaScript1.2">
if (ie4||ns6){
for (j=0;j<Month_Label.length;j++) {
document.writeln(‘<option value=‘ + j + ‘>‘ + Month_Label[j]);
}
}
</script>
</select>
</td>
<td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
<td> </td>
<td><input type="button" value="Next -->" onClick="Skip(‘+‘)"></td>
</tr></table></form></div>
<div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
</body>

</html>

 (2)

<html>
<body>
<OBJECT id=Calendar1 style="LEFT: 0px; TOP: 0px" classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02" VIEWASTEXT>
<PARAM NAME="_Version" VALUE="524288">
<PARAM NAME="_ExtentX" VALUE="7620">
<PARAM NAME="_ExtentY" VALUE="5080">
<PARAM NAME="_StockProps" VALUE="1">
<PARAM NAME="BackColor" VALUE="-2147483639">
<PARAM NAME="Year" VALUE="<%=year(now())%>">
<PARAM NAME="Month" VALUE="<%=month(now())%>">
<PARAM NAME="Day" VALUE="<%=day(now())%>">
<PARAM NAME="DayLength" VALUE="0">
<PARAM NAME="MonthLength" VALUE="0">
<PARAM NAME="DayFontColor" VALUE="8421504">
<PARAM NAME="FirstDay" VALUE="1">
<PARAM NAME="GridCellEffect" VALUE="1">
<PARAM NAME="GridFontColor" VALUE="0">
<PARAM NAME="GridLinesColor" VALUE="-2147483638">
<PARAM NAME="ShowDateSelectors" VALUE="-1">
<PARAM NAME="ShowDays" VALUE="-1">
<PARAM NAME="ShowHorizontalGrid" VALUE="-1">
<PARAM NAME="ShowTitle" VALUE="-1">
<PARAM NAME="ShowVerticalGrid" VALUE="-1">
<PARAM NAME="TitleFontColor" VALUE="255">
<PARAM NAME="ValueIsNull" VALUE="0"></OBJECT> 
</body>
</html>

 (3)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>日历</title>
</head>

<body>
 

<body onLoad="setCurrentMonth()">

<script language="JavaScript">
var ie=document.all
var ns6=document.getElementById&&!document.all
var n=document.layers


if (ie||ns6)    {fShow="visible";fHide="hidden";}
if (n) {fShow="show"; fHide="hide";}

var MonthNames = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月");
var nCurrentYear = 0;
var nCurrentMonth = 0;

var nWidth  = 30;
var nHeight = 20;

var leftX;
var rightX
var topY;
var bottomY;


function Calendar()
{

var HTMLstr = "";

HTMLstr += "<table width=‘250px‘ cellspacing=‘0‘ cellpadding=‘0‘ border=‘1‘>\n";
HTMLstr += "<tr><td bgcolor=‘darkblue‘>\n";
HTMLstr += "\n";
HTMLstr += "<table border=‘0‘ cols=‘3‘ width=‘100%‘>\n";
HTMLstr += "<tr>\n";
HTMLstr += "<td><b><font color=‘white‘>年份：</font></b></td>\n";
HTMLstr += "\n";
if (n)
{
        HTMLstr += "<td align=‘right‘ width=‘40‘>\n";
        HTMLstr += "<a href=\"javascript:prevYear();\"><font color=‘white‘ size=-2>Prev</font></a>\n";
        HTMLstr += "<a href=\"javascript:nextYear();\"><font color=‘white‘ size=-2>Next</font></a>\n";
}
if (ie||ns6)
{
        HTMLstr += "<td align=‘right‘ width=‘80‘>\n";
HTMLstr += "<a href=\"javascript:prevYear();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Prev</font></a>\n";
HTMLstr += "<a href=\"javascript:nextYear();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Next</font></a>\n";
}
HTMLstr += "</td>\n";
HTMLstr += "\n";
HTMLstr += "<td align=‘left‘>";

if (n) HTMLstr += "<ilayer id=‘main‘><layer id=‘idYear‘ top=‘0‘ left=‘0‘>\n";
if (ie||ns6)HTMLstr += "<div id=‘main‘ style=‘position: relative‘>\n";
HTMLstr += "<font color=‘#99ffff‘><b>1999</b></font>\n";
if (n) HTMLstr += "</layer></ilayer>\n";
if (ie||ns6)HTMLstr += "</div>\n";
HTMLstr += "</td>\n";
HTMLstr += "</tr>\n";
HTMLstr += "<tr>\n";
HTMLstr += "<td><b><font color=‘white‘>月份：</font></b></td>\n";
HTMLstr += "\n";
HTMLstr += "<td align=‘right‘>\n";
if (n)
{
        HTMLstr += "<a href=\"javascript:prevMonth();\"><font color=‘white‘ size=-2>Prev</font></a>\n";
        HTMLstr += "<a href=\"javascript:nextMonth();\"><font color=‘white‘ size=-2>Next</font></a>\n";
}
if (ie||ns6)
{
HTMLstr += "<a href=\"javascript:prevMonth();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Prev</font></a>\n";
HTMLstr += "<a href=\"javascript:nextMonth();\" style=‘text-decoration: none;‘><font color=‘white‘ size=-2>Next</font></a>\n";
}
HTMLstr += "</td>\n";
HTMLstr += "\n";
HTMLstr += "<td align=‘left‘>\n";
if (ie||ns6)HTMLstr += "<div id=‘main2‘ style=‘position=relative;‘>";
if (n) HTMLstr += "<ilayer id=‘main2‘><layer id=‘idMonth‘ top=‘0‘ left=‘0‘>\n";
HTMLstr += "<font color=‘#99ffff‘><b>December</b></font>\n";
if (ie||ns6)HTMLstr += "<div>\n";
if (n) HTMLstr += "</layer></ilayer>\n";
HTMLstr += "</td>\n";
HTMLstr += "\n";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "</td></tr>\n";
HTMLstr += "\n";
HTMLstr += "<tr height=‘160px‘><td valign=\"top\">\n";
HTMLstr += "\n";
HTMLstr += "<table border=0 cols=7>\n";
HTMLstr += "<tr>\n";
HTMLstr += "<td width=‘30‘><b>Mon</b></td>\n";
HTMLstr += "<td width=‘30‘><b>Tue</b></td>\n";
HTMLstr += "<td width=‘30‘><b>Wed</b></td>\n";
HTMLstr += "<td width=‘30‘><b>Thur</b></td>\n";
HTMLstr += "<td width=‘30‘><b>Fri</b></td>\n";
HTMLstr += "<td width=‘30‘><b>Sat</b></td>\n";
HTMLstr += "<td width=‘30‘><b>Sun</b></td>\n";
HTMLstr += "</tr>\n";
HTMLstr += "<tr>\n";
HTMLstr += "<td colspan=7>\n";
if (ie||ns6)HTMLstr += "<div style=‘position: relative;‘>";
if (n) HTMLstr += "<ilayer id=‘idMenuContainer‘ height=‘120px‘ width=‘250px‘>\n";

  for (var date=1; date <= 31; date++)
  {
if (n)
{
        HTMLstr += "  <layer id=\"idDate"+date+"\" val="+date+" visibility=\"hide\">\n";
        HTMLstr += "    <layer><b>"+date+"</b></layer>\n";
        HTMLstr += "  </layer>\n";
}
if (ie||ns6)
{
        HTMLstr += "  <div id=\"idDate"+date+"\" val="+date+" style=\"position: absolute; visibility: hidden\">\n";
        // HTMLstr += "    <b>"+date+"</b>\n";
        HTMLstr += "    <b>"+date+"</b>\n";
        HTMLstr += "  </div>\n";
}
  }

if (ie||ns6)HTMLstr += "</div>";
if (n) HTMLstr += "</ilayer>\n";
HTMLstr += "</td></tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "</td></tr>\n";
HTMLstr += "</table>\n";

document.writeln(HTMLstr);
buildMonthMenu(HTMLstr);
}


function setCurrentMonth()
{
  date = new Date();
  currentyear=date.getYear()
  if (currentyear < 1000)
  currentyear+=1900
  setYearMonth(currentyear, date.getMonth()+1);
}

function setMonth(nMonth)
{
        setYearMonth(nCurrentYear, nMonth);
}

function setYearMonth(nYear, nMonth)
{
  if (ie||ns6)
{
  nCurrentYear = nYear;
  nCurrentMonth = nMonth;
  var cross_obj=ns6? document.getElementById("main"): document.all["main"]
  var cross_obj2=ns6? document.getElementById("main2"): document.all["main2"]
  cross_obj.innerHTML  = "<font color=\"#99ffff\"><b>"+nCurrentYear+"</b></font>";
  cross_obj2.innerHTML = "<a href=\"javascript:showMonthMenu()\" style=\"text-decoration:none\"><font color=\"#99ffff\"><b>"+MonthNames[nCurrentMonth-1]+"</b></font></a>\n";

  var date   = new Date(nCurrentYear, nCurrentMonth-1, 1);
  var nWeek  = 1;
  var nDate;

  while (date.getMonth() == nCurrentMonth-1)
  {
        nDate = date.getDate();
        nLastDate = nDate;

        var posDay = date.getDay()-1;
        if (posDay == -1) posDay=6;
        var posLeft = posDay*(nWidth+5)+5;
        var posTop  = (nWeek-1)*nHeight;
        var cross_obj3=ns6? document.getElementById("idDate"+nDate).style : document.all["idDate"+nDate].style
        cross_obj3.left = posLeft;
        cross_obj3.top  = posTop;
        if (date.getDay() == 0 || date.getDay() == 6)
                cross_obj3.color  = "red";
        else
                cross_obj3.color  = "black";
        cross_obj3.visibility = "visible";
        // original:
        // date = new Date(currentyear, date.getMonth(), date.getDate()+1);
        // johan:
        date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1);

        if (posDay == 6) nWeek++;
  }
  for (++nDate; nDate <= 31; nDate++){
        cross_obj3=ns6? document.getElementById("idDate"+nDate).style : document.all["idDate"+nDate].style
        cross_obj3.visibility = "hidden";
      }
}
  if (n)
{
  // Verify parameters
  if (nMonth < 1 || nMonth > 12) {alert("Function: setYearMonth()\nERROR: Incorrect month "+nMomth);}

  nCurrentYear = nYear;
  nCurrentMonth = nMonth;

  document.main.document.idYear.document.open();
  document.main.document.idYear.document.write("<font color=\"#99ffff\"><b>"+nCurrentYear+"</b></font>");
  document.main.document.idYear.document.close();

  document.main2.document.idMonth.document.open();
  document.main2.document.idMonth.document.write("<a href=\"javascript:showMonthMenu()\" style=\"text-decoration:none\"><font color=\"#99ffff\"><b>"+MonthNames[nCurrentMonth-1]+"</b></font></a>");
  document.main2.document.idMonth.document.close();

  var date   = new Date(nYear, nMonth-1, 1);
  var nWeek  = 1;
  var nDate;

  while (date.getMonth() == nMonth-1)
  {
        nDate = date.getDate();
        nLastDate = nDate;

        var posDay = date.getDay()-1;
        if (posDay == -1) posDay=6;
        var posLeft = posDay*(nWidth+5)+5;
        var posTop  = (nWeek-1)*nHeight;

        document.layers["idMenuContainer"].document.layers["idDate"+nDate].left = posLeft;
        document.layers["idMenuContainer"].document.layers["idDate"+nDate].top  = posTop;
        if (date.getDay() == 0 || date.getDay() == 6)
                document.layers["idMenuContainer"].document.layers["idDate"+nDate].color  = "red";
        else
                document.layers["idMenuContainer"].document.layers["idDate"+nDate].color  = "black";
        document.layers["idMenuContainer"].document.layers["idDate"+nDate].visibility = "visible";
        date = new Date(nCurrentYear, date.getMonth(), date.getDate()+1);
        if (posDay == 6) nWeek++;
  }
  for (++nDate; nDate <= 31; nDate++)
        document.layers["idMenuContainer"].document.layers["idDate"+nDate].visibility = "hidden";
}
}

function nextMonth()
{
  nCurrentMonth++;
  if (nCurrentMonth > 12)
  {
        nCurrentMonth -= 12;
        nextYear();
  }

  setYearMonth(nCurrentYear, nCurrentMonth);
}


function prevMonth()
{
  nCurrentMonth--;
  if (nCurrentMonth < 1)
  {
        nCurrentMonth += 12;
        prevYear();
  }
  setYearMonth(nCurrentYear, nCurrentMonth);

}

function prevYear()
{
  nCurrentYear--;
  setYearMonth(nCurrentYear, nCurrentMonth);
}

function nextYear()
{
  nCurrentYear++;
  setYearMonth(nCurrentYear, nCurrentMonth);
}

////////////////////////////////////////////////////

function updateIt(e)
{
//  var x = e.pageX;
//  var y = e.pageY;

//  if (x > rightX || x < leftX) hideMonthMenu();
//  else if (y > bottomY || y < topY) hideMonthMenu();
}

function hideMonthMenu()
{
  document.layers["idMonthMenu"].visibility="hide";
}

function showMonthMenu()
{
if (!n) return;
  topY    = document.layers["main2"].pageY-50;
  bottomY = document.layers["main2"].pageY + document.layers["idMonthMenu"].clip.height+50;
  leftX   = document.layers["main2"].pageX-50;
  rightX  = document.layers["main2"].pageX + document.layers["idMonthMenu"].clip.width+50;

  document.layers["idMonthMenu"].top = document.layers["main2"].pageY+document.layers["main2"].clip.height;
  document.layers["idMonthMenu"].left = document.layers["main2"].pageX;
  document.layers["idMonthMenu"].visibility="show";
}

function buildMonthMenu()
{
if (!n) return;
  var HTML = "";
  HTML += "<layer id=\"idMonthMenu\" visibility=\"hide\" width=\"120\" bgcolor=\"darkblue\">\n";
  HTML += "<table border=\"1\" cellspacing=\"0\" cellpading=\"0\">\n";
  for (var month=0; month<12;)
  {
        HTML += "<tr>\n";
        for (var i = 0; i < 3; i++)
        {
                var nMonth = month+1;
                HTML += "<td><a href=\"javascript:hideMonthMenu();setMonth("+nMonth+");\"><font color=\"white\" size=-1><b>"+MonthNames[month]+"</b></font></a></td>\n";
                month++;
        }
        HTML += "</tr>\n";
  }
  HTML += "</table>";
  HTML += "</layer>";
  document.writeln(HTML);
}
var cal = new Calendar();
</script>
</body>

</html>

 

html编写的日历,布布扣,bubuko.com

html编写的日历

标签：style   blog   http   color   java   os   io   strong   

原文地址：http://www.cnblogs.com/ElvisZhongShao/p/3922548.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！