html+css+js实现一个简易日历

0.效果预览

只实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期。

1.HTML部分

 1 <body>
 2     <div id="cldFrame">
 3         <div id="cldBody">
 4             <table>
 5                 <thead>
 6                     <tr>
 7                         <td colspan="7">
 8                             <div id="top">
 9                                 <span id="left">&lt;</span>
10                                 <span id="topDate"></span>
11                                 <span id="right">&gt;</span>
12                             </div>
13                         </td>
14                     </tr>
15                     <tr id="week">
16                         <td></td>
17                         <td></td>
18                         <td></td>
19                         <td></td>
20                         <td></td>
21                         <td></td>
22                         <td></td>
23                     </tr>
24                 </thead>
25                 <tbody id="tbody">
26                 </tbody>
27             </table>
28         </div>
29     </div>
30 </body>

2.CSS部分

 1  1 #cldFrame{
 2  2     position: relative;
 3  3     width: 440px;
 4  4     margin: 50px auto;
 5  5 }
 6  6 #cldBody{
 7  7     margin: 10px;
 8  8     position: absolute;
 9  9     width: 420px;
10 10 }
11 11 #top{
12 12     position: relative;
13 13     height: 60px;
14 14     text-align: center;
15 15     line-height: 60px;
16 16 }
17 17 #topDate{
18 18     font-size: 30px;
19 19 }
20 20 .curDate{
21 21     color: red;
22 22     font-weight: bold;
23 23 }
24 24 table{
25 25     background-color: #f7f7f7;
26 26 }
27 27 #week td{
28 28     font-size: 15px;
29 29 }
30 30 td{
31 31     height: 60px;
32 32     width: 60px;
33 33     text-align: center;
34 34     font-family: Simsun;
35 35     font-size: 20px;
36 36 }
37 37 #left, #right{
38 38     position: absolute;
39 39     width: 60px;
40 40     height: 60px;
41 41 }
42 42 #left{left: 0px;}
43 43 #right{right: 0px;}
44 44 #left:hover, #right:hover{
45 45     background-color: rgba(30, 30, 30, 0.2);
46 46 }

 

当前显示月份和日期下面将在JS中添加。

3.JS部分及原理讲解

先介绍两个常用的和时间有关的函数,相信大多数人都接触过~

①判断某年是否是闰年

1 1 /*判断某年是否是闰年*/
2 2 function isLeap(year) {
3 3     if((year%4==0 && year%100!=0) || year%400==0){
4 4         return true;
5 5     }
6 6     else{
7 7         return false; 
8 8     }
9 9 }

二月大概是十二个月份中最不安分的一个月。

②判断某年某月某日是星期几

 1 var monthDay = [31,0,31,30,31,30,31,31,30,31,30,31]; 

在这之前用数组存放每个月有多少天,我这里将二月的天数设置成了0,之后再决定是加28还是29。

 1  1 /*判断某年某月某日是星期几,默认日为1号*/
 2  2 function whatDay(year, month, day=1) {
 3  3     var sum = 0;
 4  4     sum += (year-1)*365+Math.floor((year-1)/4)-Math.floor((year-1)/100)+Math.floor((year-1)/400)+day;
 5  5     for(var i=0; i<month-1; i++){
 6  6         sum += monthDay[i];
 7  7     }
 8  8     if(month > 2){
 9  9         if(isLeap(year)){ 
10 10             sum += 29; 
11 11         }
12 12         else{
13 13              sum += 28; 
14 14         }
15 15     }
16 16     return sum%7;      //余数为0代表那天是周日,为1代表是周一,以此类推
17 17 }

 

这个函数是为了判断某年某月的1号是星期几而设定的,实际上可以不设置day这个参数,加上了day这个变量,允许使用者在查某日的日期是星期几时也能调用这个函数。

③日历添加部分

根据当前日期决定日历显示哪个月的日期,根据那月的1号是星期几决定1号的添加位置,前方用空格子填充。该月添加完后后方也用空格子补齐。

 1 /*显示日历*/
 2 function showCld(year, month, firstDay){
 3     var i;
 4     var tagClass = "";
 5     var nowDate = new Date();
 6     
 7     var days;//从数组里取出该月的天数
 8     if(month == 2){
 9         if(isLeap(year)){
10             days = 29;
11         }
12         else{
13             days = 28;
14         }
15     }
16     else{
17         days = monthDay[month-1];
18     }
19 
20     /*当前显示月份添加至顶部*/
21     var topdateHtml = year + "年" + month + "月";
22     var topDate = document.getElementById('topDate');
23     topDate.innerHTML = topdateHtml;    
24     
25     /*添加日期部分*/
26     var tbodyHtml = '<tr>';
27     for(i=0; i<firstDay; i++){//对1号前空白格的填充
28         tbodyHtml += "<td></td>";
29     }
30     var changLine = firstDay;
31     for(i=1; i<=days; i++){//每一个日期的填充
32         if(year == nowDate.getFullYear() && month == nowDate.getMonth()+1 && i == nowDate.getDate()) {
33             tagClass = "curDate";//当前日期对应格子
34         } 
35         else{ 
36             tagClass = "isDate";//普通日期对应格子,设置class便于与空白格子区分开来
37         }  
38         tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>";
39         changLine = (changLine+1)%7;
40         if(changLine == 0 && i != days){//是否换行填充的判断
41             tbodyHtml += "</tr><tr>";
42         } 
43     }
44     if(changLine!=0){//添加结束,对该行剩余位置的空白填充
45         for (i=changLine; i<7; i++) {
46             tbodyHtml += "<td></td>";
47         }
48     }//实际上不需要填充后方,但强迫症必须整整齐齐!   
49     tbodyHtml +="</tr>";
50     var tbody = document.getElementById('tbody');
51     tbody.innerHTML = tbodyHtml;
52 }

调用后,日历就可以完整显示了~

1     var curDate = new Date();
2     var curYear = curDate.getFullYear();
3     var curMonth = curDate.getMonth() + 1;
4     showCld(curYear,curMonth,whatDay(curYear,curMonth));

④下一月与上一月

 1 function nextMonth(){
 2     var topStr = document.getElementById("topDate").innerHTML;
 3     var pattern = /\d+/g;
 4     var listTemp = topStr.match(pattern);
 5     var year = Number(listTemp[0]);
 6     var month = Number(listTemp[1]);
 7     var nextMonth = month+1;
 8     if(nextMonth > 12){
 9         nextMonth = 1;
10         year++;
11     }
12     document.getElementById('topDate').innerHTML = '';
13     showCld(year, nextMonth, whatDay(year, nextMonth));
14 }
15 function preMonth(){
16     var topStr = document.getElementById("topDate").innerHTML;
17     var pattern = /\d+/g;
18     var listTemp = topStr.match(pattern);
19     var year = Number(listTemp[0]);
20     var month = Number(listTemp[1]);
21     var preMonth = month-1;
22     if(preMonth < 1){
23         preMonth = 12;
24         year--;
25     }
26     document.getElementById('topDate').innerHTML = '';
27     showCld(year, preMonth, whatDay(year, preMonth));
28 }

两者没多大差别,别忘了要绑定到按钮上:

1     document.getElementById('right').onclick = function(){
2         nextMonth();
3     }
4     document.getElementById('left').onclick = function(){
5         preMonth();
6     }

更多有趣的功能等待着你去添加~

------------------------------------------------------------------------------------------
转载:https://www.jianshu.com/p/641820efee44
posted @ 2020-07-05 14:27  liuyunhong  阅读(1823)  评论(0编辑  收藏  举报