个人中心
gpt4 book ai didi

原生JS实现相邻月份日历

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 30 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章原生JS实现相邻月份日历由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

?
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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >原生JS写的日历月历 - demo by js.alixixi.com</ title >
< style type = "text/css" >
<!--
body {font-size: 14px;line-height: 20px;margin: 0px;padding: 0px;text-align:center;font-family: Arial;}
#overlay{position:absolute;z-index:999;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.3;filter:alpha(opacity=30);display:none;}
#win{position:absolute;z-index:999;top:50%;left:50%;width:400px;height:200px;background:rgba(00, 00, 00, 0.5);margin:-100px 0 0 -200px;display:none;}
#win #otitle{color:#fff;height:33px;padding-left:10px;text-align:left;background:rgba(00, 00, 00, 0.7);}
#win #otitle #otitlestr {float:left;width:200px;height:30px;line-height:30px;}
#win #otitle #close {font-size:24px;width:33px;height:33px;line-height:33px;text-align:center;font-weight:bold;float:right;cursor:pointer;}
#win #showstr {color:#fff;margin:10px;text-align:left;}
.clear{clear: both;}
em{font-style: normal;}
ul,li{list-style-type: none;margin:0px;padding:0px;}
#newDate{width:1230px;height:auto;margin:35px auto 0 auto;}
#newDate #nowDate{width:600px;height:600px;float:left;cursor:pointer;}
#newDate #nextDate{width:600px;height:600px;float:right;cursor:pointer;}
#newDate .Header{width:594px;height:50px;background:#e6dcda;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #FFF;position:relative;-moz-user-select:none;-webkit-user-select:none;user-select:none; }
#newDate .c{font-size:24px;font-weight:bold;height:50px;line-height:50px;text-align:center;}
#newDate .l{font-size:24px;font-weight:bold;height:50px;line-height:50px;position:absolute; top:0px; left:14px;}
#newDate .r{font-size:24px;font-weight:bold;height:50px;line-height:50px;position:absolute; top:0px; right:14px;}
#newDate .Weeks{width:595px;height:30px;}
#newDate span{font-weight:bold;width:84px;height:30px;line-height:30px;text-align:center;background:#e6dcda;margin-right:1px;float:left;}
#newDate ul li{color:#999;font-size:24px;width:84px;height:70px;line-height:70px;text-align:center;margin-top:1px;margin-right:1px;background:#f5f5f5;float:left;}
-->
</ style >
<!--[IF lt IE 9]>
<style>
#win,#win #otitle{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);}
</style>
<![endif]-->
< script type = "text/javascript" >
window.onload = function(){
   function $(id){return typeof id === "string" ? document.getElementById(id) : id;}
  function lightBoxShow(title,str)
  {
  var oWin = $("win");
    var oLay = $("overlay");
  $("otitlestr").innerHTML = title;
  $("showstr").innerHTML = str;
  oLay.style.display = "block";
  oWin.style.display = "block";
  $("close").onclick = function ()
    {
    oLay.style.display = "none";
    oWin.style.display = "none"
    }
  }
 
   var newDate = document.getElementById("newDate");
  var nowDate = document.getElementById("nowDate");
  var nextDate = document.getElementById("nextDate");
  var nDate = new Date();
 
  if(nDate.getMonth()+1==12){
    viewDate(nowDate,nDate.getFullYear(),nDate.getMonth()+1,true);
  viewDate(nextDate,nDate.getFullYear()+1,1);
  }else{
    viewDate(nowDate,nDate.getFullYear(),nDate.getMonth()+1,true);
  viewDate(nextDate,nDate.getFullYear(),nDate.getMonth()+2);
  }
  showBtn();
 
  function viewDate(obj,year,month,bBtn){
    var nDate = new Date();
  var dayNum = 0;
    
     if(!obj.bBtn){
       obj.Header = document.createElement("div");
       obj.Header.className = "Header";
       obj.appendChild(obj.Header);
      
       var Weeks = document.createElement("div");
       Weeks.className = "Weeks";
       obj.appendChild(Weeks);
      
       var weeksArr = ['SUN','MON','TUE','WEB','THU','FRI','SAT'];
       for(var i=0;i< 7 ;i++){
         var nSpan = document .createElement("span");
         nSpan.innerHTML = weeksArr [i];
         if(i==0 || i==6){
           nSpan.style.color = "red" ; 
         }
         Weeks.appendChild(nSpan);
       }
      
       var nUl = document .createElement("ul");
       for(var i = 0 ;i<42;i++){
         var nLi = document .createElement("li");
         nUl.appendChild(nLi);
       }
       obj.appendChild(nUl);
      
       obj.bBtn = true ;
     }
     obj.Header.innerHTML = ( bBtn ? '<div class = "l" >＜ < em >'+(month-1)+'</ em ></ div >' : '< div class = "r" >< em >'+(month+1)+'</ em > ＞</ div >')+'< div class = "c" >< em >'+year+'</ em >-< em >'+month+'</ em ></ div >';
     var aLi = obj.getElementsByTagName("li");
     for(var i=0;i< aLi.length ;i++){
       aLi[i] .innerHTML = "" ;
       aLi[i] .style.background = "#f5f5f5" ;
       aLi[i] .style.color = "#999" ;
     }
    
     if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
   dayNum = 31 ;
  }
  else if(month==4 || month==6 || month==9 || month==11){
   dayNum = 30 ;
  }
  else if(month==2 && isLeapYear(year)){
   dayNum = 29 ;
  }
  else{
   dayNum = 28 ;
  }
 
  nDate.setFullYear(year);
  nDate.setMonth(month-1);
  nDate.setDate(1);
 
  function Today(){
    var tDate = new Date();
   var tEm = aLi [i].parentNode.parentNode.getElementsByTagName("em");
    var tMonth = parseInt (tEm[2].innerHTML);
    var tYear = parseInt (tEm[1].innerHTML);
   if(aLi[i].innerHTML == tDate.getDate() && tYear == tDate.getFullYear() && tMonth == tDate.getMonth()+1){
      aLi[i] .style.color = "#000" ;
      aLi[i] .style.background = "#e6dcda" ;
    } 
  }
 
  switch(nDate.getDay()){
   case 0:
   for(var i = 0 ;i<dayNum;i++){
    aLi[i] .innerHTML = i+1;
    Today();
   }
   break;
   case 1:
   for(var i = 0 ;i<dayNum;i++){
    aLi[i+1] .innerHTML = i+1;
    Today();
   }
   break;
   case 2:
   for(var i = 0 ;i<dayNum;i++){
    aLi[i+2] .innerHTML = i+1;
    Today();
      }
   break;
   case 3:
   for(var i = 0 ;i<dayNum;i++){
    aLi[i+3] .innerHTML = i+1;
    Today();
   }
   break;
   case 4:
   for(var i = 0 ;i<dayNum;i++){
    aLi[i+4] .innerHTML = i+1;
    Today();
   }
   break;
   case 5:
   for(var i = 0 ;i<dayNum;i++){
    aLi[i+5] .innerHTML = i+1;
    Today();
   }
   break;
   case 6:
   for(var i = 0 ;i<dayNum;i++){
    aLi[i+6] .innerHTML = i+1;
    Today();
   }
   break;
  
  }
 
  if(month==1 && bBtn){
   obj.Header.getElementsByTagName('em')[0] .innerHTML = 12 ;
  }
  else if(month==12 && !bBtn){
   obj.Header.getElementsByTagName('em')[0] .innerHTML = 1 ;
  }
 
  }
 
  function isLeapYear(year){
  if(year%4==0 && year%100!=0){
   return true;
  }
  else{
   if(year%400==0){
   return true;
   }
   else{
   return false;
   }
  }
  }
 
 
  function showBtn(){
  var nowEm = nowDate .getElementsByTagName("em");
  var nextEm = nextDate .getElementsByTagName("em");
  var leftMonth = parseInt (nowEm[0].innerHTML);
  var leftYear = parseInt (nowEm[1].innerHTML);
  var rightMonth = parseInt (nextEm[0].innerHTML);
  var rightYear = parseInt (nextEm[1].innerHTML);
 
 
  nowEm[0] .parentNode.onclick = function (){
 
   if(leftMonth == 12){
   viewDate(nowDate,leftYear-1,leftMonth,true);
   viewDate(nextDate,leftYear,1);
   }
   else{
   viewDate(nowDate,leftYear,leftMonth,true);
   viewDate(nextDate,leftYear,leftMonth+1);
   }
  
   showBtn();
   
  };
 
  nextEm[0] .parentNode.onclick = function (){
  
   if(rightMonth == 1){
   viewDate(nowDate,rightYear,12,true);
   viewDate(nextDate,rightYear+1,rightMonth);
   }
   else{
   viewDate(nowDate,rightYear,rightMonth-1,true);
   viewDate(nextDate,rightYear,rightMonth);
   }
  
   showBtn();
   
  };
 
  }
  function nowDay(){
    var tLi = newDate .getElementsByTagName("li");
    var tDate = new Date();
   
    for(var i = 0 ;i<tLi.length;i++){
      tLi[i] .onmouseover = function (){
      if(this.innerHTML != ""){
        this.style.color = "#000" ;
        this.style.background = "#e6dcda" ;
     }
    }
    tLi[i] .onmouseout = function (){
      if(this.innerHTML != ""){
        this.style.color = "#999" ;
        this.style.background = "#f5f5f5" ;
     }
    }
    tLi[i] .onclick = function (){
      var tEm = this .parentNode.parentNode.getElementsByTagName("em");
      var tMonth = parseInt (tEm[2].innerHTML);
      var tYear = parseInt (tEm[1].innerHTML);
      if(this.innerHTML!=""){
        lightBoxShow(tYear+"-"+tMonth+"-"+this.innerHTML+" Message","None");
        //alert(tYear+"-"+tMonth+"-"+this.innerHTML);
      }
    }
    }
   
    for(var j = tLi .length/2;j<tLi.length;j++){
      if(tLi[j].innerHTML == tDate.getDate()){
      tLi[j] .style.color = "#000" ;
      tLi[j] .style.background = "#e6dcda" ;
    } 
    }
  }
  nowDay();
}
</script>
</ head >
< body >
< div id = "newDate" >
   < div id = "nextDate" ></ div >
   < div id = "nowDate" ></ div >
</ div >
< div id = "overlay" ></ div >
< div id = "win" >
   < div id = "otitle" >
     < div id = "close" >×</ div >
    < div id = "otitlestr" ></ div >
   </ div >
   < div id = "showstr" ></ div >
</ div >
</ body >
</ html >

效果:

原生JS实现相邻月份日历

以上就是原生JS实现双界面日历的详细内容，更多关于js 日历的资料请关注我其它相关文章！ 。

原文链接：https://cloud.tencent.com/developer/article/1025890 。

最后此篇关于原生JS实现相邻月份日历的文章就讲到这里了,如果你想了解更多关于原生JS实现相邻月份日历的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

30 4 0
文章推荐： JavaScript本地储存:localStorage、sessionStorage、cookie的使用
文章推荐： Node.js ObjectWrap 的弱引用问题
文章推荐： Node.js 控制台动画，绘制跨年祝福
文章推荐： 如何使用Whispers识别静态结构化文本中的硬编码敏感信息
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com