js日历

Posted 倔小强

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js日历相关的知识,希望对你有一定的参考价值。

技术分享
  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 }
View Code

 

以上是关于js日历的主要内容,如果未能解决你的问题,请参考以下文章

js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)

js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)

日历返回错误的月份

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

原生JS实现日历

纯JS写出日历