教你做自己的个性日历

 

|字号 订阅

 

a.js

/*
 * 机          能 ：日历
 * 制作日期 :2009/05/25
 * 制  作  人  ：Good fun
 * 版         本  ：version 1.0
 */

//文本框输出的年
var syear;
//文本框输出的月
var smonth;
//文本框输出的日 开始时候为1
var sday=1;
/**
 * 机 能：对输入的日期进行格式化判断如（2008/5/3）如果不是这种格式 则报错 否则将输入日期返回
 */
function dateFormat(date) {
 var dateformat = new RegExp(
   "^[1-9][0-9]{3}/(([0][1-9])|([1][0-2])|[1-9])/(([0-2][0-9])|([3][0-1])|[1-9])$");
 if (!dateformat.test(date)) {
  alert("The date format you have entered is not correct!");
  document.getElementById("dateinput").value = "";
 }else{
  return date;
 }
 
}
/*
 * 机  能：输入一个日期 返回该日期是星期几
 */
function getWeek(year, month, day) {
 //month 因为Date月份是0-11 所有减1
 var date = new Date(year, month - 1, day);
 var weekday = date.getDay();
 return (weekday);
}
/*
 * 机 能：输入一个日期 返回该日期的月份有多少天
 */
function getMonthDays(year, month) {
 var mondays = 0;
 if (month == 2) {
  //判断该年是否为晕年
  if (year % 4 == 0 && (year % 400 != 0)) {
   mondays = 29;
  } else {
   mondays = 28;
  }
 } else {
  if (month == 4 || month == 6 || month == 9 || month == 11) {
   mondays = 30;
  } else {
   mondays = 31;
  }
 }
 return mondays;
}
/*
 * 机  能：当日期改变 重新输出日历
 */
function onDateChange(year, month) {
 var str = "";
 //WNum接收输入年月的第一天是星期几，前面用空格代替
 var WNum = getWeek(year, month, 1);
 for (j = 0; j < WNum; j++) {
  str += "<div></div>";
 }
 //MNum接收该年该月总共有多少天
 var MNum = getMonthDays(year, month);
 //输出该月的每一天
 for (j = 1; j <= MNum; j++) {
  var TNum = getWeek(year, month, j);
  //如果该天为星期天或星期六 该文本字体用红色 否则用黑色
  if (TNum == 0 || TNum == 6) {
   var id = j;
   str += "<div  id = " + j+'s' + " style='color:#F00' onClick='setDate(this)'  onmouseenter='setColor(this)'  onmouseleave='setColoro(this)'> "
     + j + "</div>";
  } else {
   str += "<div id = " + j+'s' + " style='color:#00F'  onClick='setDate(this)'  onmouseenter='setColor(this)'  onmouseleave='setColoro(this)'>"
     + j + "</div>";
  }

 }
 //找出该月的最后一天
 var EndNum = j - 1;
 //如果最后一天不是星期六 则用空格代替
 var EndWeekNum = getWeek(year, month, EndNum);
 for (j = EndWeekNum; j < 6; j++) {
  str += "<div></div>";
 }
 //在页面输出以上的元素
 document.getElementById("td1").innerHTML = str;
 //在输出文本框里面输出选中的日期
 syear=document.getElementById("YearSel").value
    smonth=document.getElementById("MonthSel").value
    sdate=syear+"/"+smonth+"/"+sday;
    document.getElementById("outDate").value=sdate;
    var today = new Date();
    var thisday = today.getDate();
    sday=thisday;
    //默认选中该月的今天的号的背景颜色设置为黄色
    document.getElementById(thisday+"s").style.background='yellow';
  
   // alert(dateEE);
  //  if(document.getElementById("dateinput").value!=null){
      //  //var ssday = dateEE.getDate();
     //var dateEE = document.getElementById("dateinput").value ;
     //var ary = dateEE.split("/");
     //var ssday = ary[2];
     //alert(ssday);
     //document.getElementById(ssday+"s").style.background='yellow';
     //document.getElementById("dateinput").value = "";
  //  }else{
     //alert("llll");
     
   // }
}
//在输出文本框里面输出选择的日期
function setDate(obj) {
    //先将该文本框清空
 document.getElementById("outDate").value="";
 syear=document.getElementById("YearSel").value
    smonth=document.getElementById("MonthSel").value
    sday=event.srcElement.innerText;
 sdate=syear+"/"+smonth+"/"+sday;
 document.getElementById("outDate").value=sdate;

}
//当鼠标进入该区域时，将该区域的背景颜色改变
function setColor(obj) {
 bgColor = "#FFCCCC";
 obj.style.background='#FFCCCC';
}
//当鼠标离开该区域时，将该区域的背景颜色改变
function setColoro(obj) {
 bgColor = "#FFCCCC"; 
 obj.style.background='white';
}
/*
 * 机  能：在输入文本框里面输入一个日期时候 ，输出日历 ，并在输出文本框输出输入的日期
 */
function setDates(){
    //获得输入的日期
 var date = document.getElementById("dateinput").value;
 //对输入日期进行格式化判断
 var tdate = dateFormat(date);
 //把输入日期以“/”分成年，月，日三个字符串
 var ary = tdate.split("/");
 //输出日历
 onDateChange(ary[0], ary[1]);
 syear = ary[0];
 smonth = ary[1];
 sday = ary[2];
 ssmonth=ary[1]
 //对数入的月份进行判断如08则将8取出
 if(ary[1].length == 2 && ary[1].charAt(0) == 0){
     ssmonth=ary[1].charAt(1);
 }
 //将年份写回到年下拉列表的中
 document.getElementById("YearSel").value = ary[0];
    var today = new Date();
    var thisday = today.getDate();
    //默认选中该月的今天的号的背景颜色设置为黄色
    document.getElementById(thisday+"s").style.background='white';
 document.getElementById(ary[2]+"s").style.background='yellow';
 //将月份写回到月下拉列表中
 document.getElementById("MonthSel").value = ssmonth;
 //在输出文本框中输出输入的日期
 sdate = syear + "/" + smonth + "/" + sday;
 document.getElementById("outDate").value = sdate;
 //document.getElementById("dateinput").value="";

}

下面是HTML  Calendor.html

<html>
<head>
<title></title>
<style type="text/css">
<!--
.font1{ font-family:"宋体"; font-size:12px; line-height:23px;}
.font1 div{ list-style-type:none; float:left; height:23px; width:43px; border-top:1px solid #000000; border-left:1px solid #000000; text-align:center;}
-->
</style>
<script language="javascript" src="a.js"></script>

</head>
<body>
    <table align="center">
    <tr>
    <td>YYYY/MM/DD:<input type="text" id="dateinput" value=""/><input type="button" id="buttons"  value="submit" onClick="setDates()" ></input></td>
    <tr>
    <td>
    <div class="font1" ALIGN="center" style="width:302px; height:24px; border:1px solid #000; border-bottom:0;"><select name="YearSel" id="YearSel" onChange="onDateChange(this.value,MonthSel.value);">
 <script language="javascript">
 for(i=1950;i<=1950+200;i++)
   {
   var DateObj=new Date();
   var YearNum=DateObj.getYear();
   if(i==YearNum)
     document.write("<option value='"+i+"' selected>"+i+"</option>");
   else
     document.write("<option value='"+i+"'>"+i+"</option>");
   }
 </script>
    </select>
     年
     <select name="MonthSel" id="MonthSel" onChange="onDateChange(YearSel.value,this.value);">
  <script language="javascript">
 for(i=1;i<=12;i++)
   {
   var DateObj1=new Date();
   var MonthNum=DateObj1.getMonth()+1;
   if(i==MonthNum)
     document.write("<option value='"+i+"' selected>"+i+"</option>");
   else
     document.write("<option value='"+i+"'>"+i+"</option>");
   }
 </script>
     </select>
    月
 </div>
    <div class="font1" style="height:24px; width:302px; border-right:1px solid #000;">
   <div style="color:#F00;" id="hello" value="日" onClick=alert("dd") >日</div>
      <div>一</div>
      <div>二</div>
      <div>三</div>
      <div>四</div>
      <div>五</div>
      <div style="color:#F00;">六</div>
 </div>
    <div id="td1"  class="font1" style=" width:302px; margin-right:auto; margin-right:auto; height:2px;border-bottom:1px solid #000; background:#FFF; border-right:1px solid #000;">
      <script language="javascript">
   var d = new Date();
   var ThisYear=d.getYear();
   var ThisMonth=d.getMonth()+1;
   var TheDay=1
   var WNum=getWeek(ThisYear,ThisMonth,TheDay);
   for(j=0;j<WNum;j++)
     {
  document.write("<div></div>");
  }
   var MNum=getMonthDays(ThisYear,ThisMonth);
   for(j=1;j<=MNum;j++)
     {
  var TNum=getWeek(ThisYear,ThisMonth,j);
  if(TNum==0 || TNum==6)
    {
    document.write("<div id = " + j+'s' + " style='color:#F00' onClick='setDate()'  onmouseenter='setColor(this)'  onmouseleave='setColoro(this)'>"+j+"</div>");
    }
  else
    {
    document.write("<div id = " + j+'s' + " style='color:#00F'onClick='setDate()'  onmouseenter='setColor(this)'  onmouseleave='setColoro(this)' >"+j+"</div>");
    }
  }
   var EndNum=j-1;
   var EndWeekNum=getWeek(ThisYear,ThisMonth,EndNum);
   for(j=EndWeekNum;j<6;j++)
     {
  document.write("<div></div>");
  }
  var today = new Date();
  var thisday = today.getDate();
  document.getElementById(thisday+"s").style.background = 'yellow';
   </script>
    </div>
    </td>
    </tr>
    <tr><td>Choosed Date :<input type="text" id="outDate" value="" enabled="disabled"></td></tr>
    </table>
</body>
</html>

 

日历表制作源代码-----------------------------------------------------------------------------------------------------------------------

<SCRIPT language=JavaScript>

function Year_Month(){

    var now = new Date();

    var yy = now.getYear();

    var mm = now.getMonth()+1;

    var cl = '<font color="#0000df">';

    if (now.getDay() == 0) cl = '<font color="#c00000">';

    if (now.getDay() == 6) cl = '<font color="#00c000">';

    return(cl +  yy + '年' + mm + '月</font>'); }

 function Date_of_Today(){

    var now = new Date();

    var cl = '<font color="#ff0000">';

    if (now.getDay() == 0) cl = '<font color="#c00000">';

    if (now.getDay() == 6) cl = '<font color="#00c000">';

    return(cl +  now.getDate() + '</font>'); }

 function Day_of_Today(){

    var day = new Array();

    day[0] = "星期日";

    day[1] = "星期一";

    day[2] = "星期二";

    day[3] = "星期三";

    day[4] = "星期四";

    day[5] = "星期五";

    day[6] = "星期六";

    var now = new Date();

    var cl = '<font color="#0000df">';

    if (now.getDay() == 0) cl = '<font color="#c00000">';

    if (now.getDay() == 6) cl = '<font color="#00c000">';

    return(cl +  day[now.getDay()] + '</font>'); }

 function CurentTime(){

    var now = new Date();

    var hh = now.getHours();

    var mm = now.getMinutes();

    var ss = now.getTime() % 60000;

    ss = (ss - (ss % 1000)) / 1000;

    var clock = hh+':';

    if (mm < 10) clock += '0';

    clock += mm+':';

    if (ss < 10) clock += '0';

    clock += ss;

    return(clock); }

function refreshCalendarClock(){

document.all.calendarClock1.innerHTML = Year_Month();

document.all.calendarClock2.innerHTML = Date_of_Today();

document.all.calendarClock3.innerHTML = Day_of_Today();

document.all.calendarClock4.innerHTML = CurentTime(); }

 var webUrl = webUrl;

document.write('<table border="0" cellpadding="0" cellspacing="0"><tr><td>');

document.write('<table id="CalendarClockFreeCode" border="0" cellpadding="0" cellspacing="0" width="60" height="70" ');

document.write('style="position:absolute;visibility:hidden" bgcolor="#eeeeee">');

document.write('<tr><td align="center"><font ');

document.write('style="cursor:hand;color:#ff0000;font-family:宋体;font-size:14pt;line-height:120%" ');

if (webUrl != 'netflower'){

   document.write('</td></tr><tr><td align="center"><font ');

   document.write('style="cursor:hand;color:#2000ff;font-family:宋体;font-size:9pt;line-height:110%" ');

}

document.write('</td></tr></table>');

document.write('<table border="0" cellpadding="0" cellspacing="0" width="61" bgcolor="#C0C0C0" height="70">');

document.write('<tr><td valign="top" width="100%" height="100%">');

document.write('<table border="1" cellpadding="0" cellspacing="0" width="58" bgcolor="#FEFEEF" height="67">');

document.write('<tr><td align="center" width="100%" height="100%" >');

document.write('<font id="calendarClock1" style="font-family:宋体;font-size:7pt;line-height:120%"> </font><br>');

document.write('<font id="calendarClock2" style="color:#ff0000;font-family:Arial;font-size:14pt;line-height:120%"> </font><br>');

document.write('<font id="calendarClock3" style="font-family:宋体;font-size:9pt;line-height:120%"> </font><br>');

document.write('<font id="calendarClock4" style="color:#100080;font-family:宋体;font-size:8pt;line-height:120%"><b> </b></font>');

document.write('</td></tr></table>');

document.write('</td></tr></table>');

document.write('</td></tr></table>');

setInterval('refreshCalendarClock()',1000);

                                            </SCRIPT>