feiyang10086 发表于 2012-01-20 20:47

JS实现日历-1


JS实现日历-1





日历控件经常在平常的工作中使用到，他的实现方法以前并没有深入研究，今天写了一个简单的，知识打印出日历的基本结构，以后会添加更强大的功能。请关注后面的文章.







Html代码1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.<html>
3. <head>
4.<title> 日历 </title>
5.<meta name="Generator" content="EditPlus">
6.<meta name="Author" content="">
7.<meta name="Keywords" content="">
8.<meta name="Description" content="">
9.<style type="text/css">
10.         
11.</style>
12.   
13. </head>
14.
15. <body>
16.    <div id="calendar">
17.      
18.    </div>
19. </body>
20.</html>
21. <script type="text/javascript">
22.<!--
23.    function Calendar(year,month,day){
24.
25.      if(typeof year!="number"||typeof month !="number"){
26.            throw new Error("参数必须为整形");
27.      }
28.      this.year=year;
29.      this.month=month;
30.      this.day=day;
31.      this.daysOfMonth=
32.      Calendar.prototype.getDaysOfMonth=function(){
33.            var value=this.daysOfMonth;
34.            if(value==0){
35.                if((this.year%4==0&&this.yea%100!=0)||(this.yea%400==0))
36.                {
37.                  value=29
38.                }
39.                else
40.                {
41.                  value=28
42.                }
43.            }
44.            return value;
45.      };
46.      //获取本月的第一天是星期几
47.      Calendar.prototype.getDayBeginOfMonth=function(){
48.            var today=new Date();
49.            today.setYear(this.year);
50.            today.setMonth(this.month-1);
51.            today.setDate(1);
52.            return today.getDay();
53.      };
54.      //获取本月的最后一天是星期几
55.      Calendar.prototype.getDayEndOfMonth=function(){
56.            var today=new Date();
57.            today.setYear(this.year);
58.            today.setMonth(this.month-1);
59.            today.setDate(this.getDaysOfMonth());
60.            return today.getDay();
61.      };
62.      //获取日历数组
63.      Calendar.prototype.getCalData=function(){
64.            var days=this.getDaysOfMonth();
65.            var firstDay=this.getDayBeginOfMonth();
66.            var lastDay=this.getDayEndOfMonth();
67.            var data=new Array(firstDay+days+6-lastDay);
68.            for(var i=0,j=0;i<data.length;i++){
69.                if(i<firstDay||i>=(days+firstDay)){
70.                  data="";
71.                }else{
72.                  j++;
73.                  data=j;
74.                }
75.            }
76.            return data;
77.            
78.      };
79.    }
80.    var cal=new Calendar(2012,3);
81.    var data=cal.getCalData();
82.    var calendarDom=document.getElementById("calendar");
83.    var table=document.createElement("table");
84.    for(var i=0;i<data.length;i++){
85.      if(i%7==0){
86.            table.insertRow(-1);
87.      }
88.      var curRow=table.rows;
89.      var curCell=document.createElement("td");
90.      curCell.innerHTML=data;
91.      curRow.appendChild(curCell);
92.         
93.    }
94.      
95.    calendarDom.appendChild(table);
96.//-->
97.</script>

清风鸟儿 发表于 2012-01-20 20:48

谢谢分享

sychangchun 发表于 2012-01-25 23:07

有个效果预览就更好了啊。
页: [1]
查看完整版本: JS实现日历-1