1 <html>
2 <head>
3 <title>日历表格</title>
4 <style type="text/css">
5 .DateTime {
6 width: 99%;
7 margin-top: 4px;
8 }
9 .dateTitle {
10 text-align: center;
11 }
12 ul li {
13 list-style: none;
14 float: left;
15 width: 14.29%;
16 height: 20px;
17 border: 1px solid #e6e6e6;
18 text-align: center;
19 }
20 ul {
21 width: 104%;
22 text-align: center;
23 margin-left: -28px;
24 }
25 h2 {
26 text-align: center;
27 }
28 h1 {
29 text-align: center;
30 }
31 .wek {
32 background-color: #1e1e1e;
33 color: #ffffff;
34 }
35 .h2title {
36 text-align: center;
37 height: 50px;
38 width: 99%;
39 }
40 </style>
41 </head>
42 <body>
43 <div class="DateTime">
44 </div>
45 </body>
46 </html>
47 @section scripts
48 {
49 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
50 <script>
51 $(function() {
52 var nowDate = new Date();
53 var year = nowDate.getFullYear(); //年
54 var month = nowDate.getMonth() + 1; //月
55 //console.log(month);
56 var day = nowDate.getDate(); //日
57 var wek = nowDate.getDay(); //周
58 var html = "<h1 class=\" dateTitle\">日历Title</h1>";
59 for (var y = year; y < (year + 10); y++) {
60 html += "<ul>";
61 var YearType = IsRYear(y); //判断年份类型（闰年/平年）（true/false）
62 if (y == year) { //当年份等于当前年份时，循环的月份为当前月开始，否则自动从1月份开始循环
63 for (var m = month; m <= 12; m++) {
64 html += "</br><li class=\"h2title\"><h2>" + y + " 年" + (m) + "月</h2></li></br>";
65 html += "<li class=\"wek\">周日</li><li class=\"wek\">周一</li><li class=\"wek\">周二</li><li class=\"wek\">周三</li><li class=\"wek\">周四</li><li class=\"wek\">周五</li><li class=\"wek\">周六</li>";
66 if (month > 12) {
67 break;
68 } else {
69 //console.log(y, m, MHasDay(YearType, m)); //调用方法打印日历
70 var GetDate = new Date(y, m-1, 1);
71 var dateDay = GetDate.getDay();
72 console.log(GetDate,dateDay);
73 if (GetDate.getDay() != 0) {
74 for (var bwek = 0; bwek < GetDate.getDay() ; bwek++) {
75 html += "<li>前</li>";
76 }
77 }
78 var Days = MHasDay(YearType, m); //获取月天数
79 //console.log(m, Days);
80 for (var md = 1; md <= Days; md++) {
81 html += "<li>" + md + "</li>";
82 if (md == Days) {
83 var ldate = new Date(y, m, md);
84 var ld = ldate.getDay();
85 for (ld ; ld < 7; ld++) {
86 html += "<li>后</li>";
87 }
88 }
89 }
90 }
91 }
92 } else {
93 for (var m = 1; m <= 12; m++) {
94 html += "<li class=\"h2title\"><h2>" + y + " 年" + (m) + "月</h2></li>";
95 html += "<li class=\"wek\">周日</li><li class=\"wek\">周一</li><li class=\"wek\">周二</li><li class=\"wek\">周三</li><li class=\"wek\">周四</li><li class=\"wek\">周五</li><li class=\"wek\">周六</li>";
96 //console.log(y, m, MHasDay(YearType, m));
97 if (month > 12) {
98 break;
99 } else {
100 //console.log(y, m, MHasDay(YearType, m)); //调用方法打印日历
101 var GetDate = new Date(y, m, 1);
102 //console.log(GetDate.getDay());
103 if (GetDate.getDay() != 0) {
104 for (var bwek = 0; bwek < GetDate.getDay() ; bwek++) {
105 html += "<li> </li>";
106 }
107 }
108 var Days = MHasDay(YearType, m); //获取月天数
109 for (var md = 1; md <= Days; md++) {
110 html += "<li>" + md + "</li>";
111 if (md == Days) {
112 var LDate = new Date(y, m, Days);
113 for (var ld = LDate.getDay() ; ld < 7; ld++) {
114 html += "<li> </li>";
115 }
116 }
117 }
118 }
119 }
120 }
121 html += "</ul>";
122 }
123 $('.DateTime').append(html);
124
125 });
126
127 //判断是否为闰年
128 function IsRYear(year) {
129 if (year % 4 == 0) {
130 return true;
131 } else {
132 return false;
133 }
134 }
135
136 //判断每月有几天
137 function MHasDay(yearType, month) {
138 var monthday = null;
139 if (yearType == true) {
140 //闰年1月31天，2月29天，3月31天，4月30天，5月31天，6月30天，7月31天，8月31天，9月30天，10月31天，11月30天，12月31天
141 monthday = ["31", "29", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
142 return monthday[month - 1];
143 } else {
144 monthday = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
145 return monthday[month - 1];
146 }
147 }
148
149 </script>
150 }
浙公网安备 33010602011771号