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 }
以上是关于js日历的主要内容，如果未能解决你的问题，请参考以下文章
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)