正文

JavaScript快速实现日历效果

︶ㄣ速达网 メ
米米素材网V管理员 / 阅读
0720

这篇文章主要为大家详细介绍了JavaScript快速实现日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript快速实现日历效果的具体代码，供大家参考，具体内容如下

效果图

JavaScript快速实现日历效果

代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
 
    }
 
    #calendar {
      background-color: #9900ff;
      color: #fff;
      border-radius: 5px;
      margin: 100px auto;
    }
 
    #title {
      font-size: 1.4em;
      padding: 4px 0.55em;
    }
 
    #days th {
      font-weight: bold;
      text-align: center;
      padding: 4px 0.55em;
    }
 
    #calendar td {
      text-align: center;
      padding: 4px 20px;
    }
 
    #today {
      color: #f00;
      font-weight: bold;
    }
 
    .poin {
      cursor: pointer;
      cursor: hand;
    }
  </style>
  <script>
    window.onload=function(){
      var form = document.getElementById('calendar');
      // 通过日历对象去调用自身的init方法
      calendar.init(form);
    }
    var calendar = {
      year: null,
      month: null,
      //日的数组
      dayTable: null,
      //初始化函数
      init(form) {
        // 1获取日数组
        this.dayTable=form.getElementsByTagName('td');
        //2创建日历,传入当前时间
        this.createCalendar(form,new Date());
        var nextMon=form.getElementsByTagName('th')[2];
        var preMon=form.getElementsByTagName('th')[0];
        preMon.onclick=function(){
        calendar.clearCalendar(form)
          var preDate=new Date(calendar.year,calendar.month-1,1);
          calendar.createCalendar(form,preDate)
        }
        nextMon.onclick=function(){
          calendar.clearCalendar(form)
          var nextDate=new Date(calendar.year,calendar.month+1,1);
          calendar.createCalendar(form,nextDate)
        }
      },
      //清除日历数据
      clearCalendar(form){
        var tds=form.getElementsByTagName('td');
        for (var i = 0; i < tds.length; i++) {
          tds[i].innerHTML='&nbsp';
          // 清除今天的样式
          tds[i].id='';
        }
      },
      // 3生成日历
      // from table表格 date要创建的日期
      createCalendar(form,date){
        //获取此时的年份
         this.year=date.getFullYear();
         //获取此时的月份
         this.month=date.getMonth();
 
         //年份月份写入日历
         form.getElementsByTagName('th')[1].innerHTML = this.year+"年"+(this.month+1)+"月";
         //获取本月的天数
         var dataNum=this.getDateLen(this.year,this.month);
         var fristDay = this.getFristDay(calendar.year,calendar.month);
        // 循环将每一天的天数写入到日历中
        // 让i表示日期。
        for (var i = 1; i <= dataNum; i++) {
          this.dayTable[fristDay+i-1].innerHTML=i;
          var nowDate =new Date();
          if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
            //  将当期元素的id设置为today
            calendar.dayTable[i+fristDay-1].id = "today";
          }
        }
      },
       // 获取本月份的天数
       getDateLen(year,month){
        //获取下个月的第一天
        var nextMonth=new Date(year,month+1,1);
        // 设置下月第一天的小时-1，也就是上个月最后一天的小时数，随便减去一个值不要超过24小时
        nextMonth.setHours(nextMonth.getHours()-1);
        //获取此时下个月的日期,就是上个月最后一天.
        return nextMonth.getDate();
       },
       // 获取本月第一天为星期几。
      getFristDay:function(year,month){
        var fristDay=new Date(year,month,1);
        return fristDay.getDay();
      }
    }
  </script>
</head>
 
<body>
  <table id="calendar">
    <tr>
      <!-- 向左箭头 -->
      <th class="poin">&lt;&lt;</th>
      <!-- 年月 -->
      <th id="title" colspan="5"></th>
      <!-- 向右箭头 -->
      <th class="poin">&gt;&gt;</th>
    </tr>
    <tr id="days">
      <th>日</th>
      <th>一</th>
 
      <th>二</th>
      <th>三</th>
      <th>四</th>
      <th>五</th>
      <th>六</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
 
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：https://blog.csdn.net/weixin_50821119/article/details/114435766