原生JS 左右箭头选择日期

川长思鸟来 2022-05-27 05:21 259阅读 0赞

先上个效果图，就是用左右尖括号可改变中间日期的值。（点击中间显示区域有时间选择器弹框，用的插件就不说了，主要说自己原创的部分）

![Center][]

HTML部分 (左右箭头都是用的图片素材，网上一大把，这里我就显示我本地地址了)

**\[html\]**  [view plain][]  [copy][view plain]

1.  <div>  
2.             <span class="leftspan" <span style="color:\#FF0000;">onclick="reducedate()"</span>><img src="IMG/return.png" style="height:100%; width:100%;"/></span>  
3.             <label id="beginTime" class="kbtn"></label>  
4.             <span class="rightspan" <span style="color:\#FF0000;">onclick="adddate()"</span>><img src="IMG/right.png" style="height:100%; width:100%;"</span>  
5.  </div>

HTML部分没什么可说的

下面原生JS部分了（底部有本插件附件，欢迎各路朋友评论交流）

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  function adddate()\{  
2.        
3.      //向右跳转时间（加时间）的按钮  
4.      var s = document.getElementById("beginTime").innerHTML;  
5.        
6.      var arr = s.split("/"); //将获取的数组按“/”拆分成字符串数组  
7.        
8.      var year = parseInt(arr\[0\]);//开分字符串数组的第一个地址的内容是年份  
9.      var mouth = parseInt(arr\[1\]);//开分字符串数组的第二个地址的内容是月份  
10.     var date = parseInt( arr\[arr.length-1\]);//开分字符串数组的第三个地址的内容是日期  
11.       
12.     if(date == 28)\{ //当日期为28号时 只判断是否是2月  
13.         switch(mouth)  
14.         \{  
15.               case 2:  
16.                   if(year % 4 == 0 && year % 100 !=0 || year%400 ==0)\{  
17.                       date = date +1;  
18.                       break;  
19.                       //如果是闰年2月 日期就加一  
20.                      \} else\{  
21.                           date = 1;  
22.                          mouth = mouth +1;   
23.                          break;  
24.                      //不是闰年2月 日期就变为1 月份加一  
25.                          \}  
26.               default:  
27.                     date = date +1;  
28.                     break;  
29.                          //其他月份默认日期加一  
30.         \}  
31.           
32.     \}else if(date == 29)\{ //当日期为29号是 也是判断是否是2月  
33.         switch(mouth)  
34.         \{  
35.               case 2:  
36.                    date = 1;  
37.                    mouth = mouth +1;  
38.                    break;  
39.               default:  
40.                    date = date +1;  
41.                    break;  
42.         \} //当29号出现必定是闰年 日期变为1 月份加一 其他月份默认日期加一  
43.           
44.     \}else if(date == 30)\{ //当日期为30 时  
45.              switch(mouth)  
46.                \{  
47.                     case 1:  
48.                     case 3:  
49.                     case 5:  
50.                     case 7:  
51.                     case 8:  
52.                     case 10:  
53.                     case 12:   
54.                          date = date +1;  
55.                          break; //这些月份的时候一个月有31天 到30的时候再加一  
56.                     case 4:  
57.                     case 6:  
58.                     case 9:  
59.                     case 11:   
60.                          date = 1;  
61.                          mouth = mouth +1;  
62.                         break; //这些月份的时候一个月有30天 到30的时候 日期变为1 月份加一  
63.                       
64.                \}  
65.        \}else if(date == 31)\{  
66.              
67.              switch(mouth)  
68.                \{  
69.                     case 1:  
70.                     case 3:  
71.                     case 5:  
72.                     case 7:  
73.                     case 8:  
74.                     case 10:  
75.                          date = 1;  
76.                          mouth = mouth+1;  
77.                          break; //这些月份的时候一个月有31天 到31的时候  日期为1月份加一  
78.                     case 12:   
79.                          date = 1;  
80.                          mouth = 1;  
81.                          year = year+1;;  
82.                          break;  //十二月 的 31 号 日期变为一 月份变为一 年份加一  
83.                                           
84.                \}  
85.        \}else\{  
86.            date +=1;  
87.            \}  
88.       
89.     document.getElementById("beginTime").innerHTML = year+"/"\+mouth+"/"\+date;  
90.   
91.     \}  
92.       
93.       
94. function reducedate()\{  
95.     //向左跳转时间（减时间）的按钮  
96.     var s = document.getElementById("beginTime").innerHTML;  
97.       
98.     var arr = s.split("/"); //将获取的数组按“/”拆分成字符串数组  
99.       
100.     var year = parseInt(arr\[0\]);//开分字符串数组的第一个地址的内容是年份  
101.     var mouth = parseInt(arr\[1\]);//开分字符串数组的第二个地址的内容是月份  
102.     var date = parseInt( arr\[arr.length-1\]);//开分字符串数组的第三个地址的内容是日期  
103.       
104.     if(date == 1)\{ //当日期为1时，再剪就会改变月份，甚至年份  
105.         switch(mouth)\{  
106.             case 1:  
107.                  date = 31;  
108.                  mouth = 12;  
109.                  year = year-1;  
110.                  break;  //一月一日 再剪一天 年份减一 月份为12 日期为31  
111.             case 2:  
112.             case 4:  
113.             case 6:  
114.             case 8:  
115.             case 9:  
116.             case 11:  
117.                  date = 31;  
118.                  mouth = mouth-1;  
119.                  break; //这些月一日 再剪一天  月份减一 日期为31  
120.             case 3:  
121.                   if(year % 4 == 0 && year % 100 !=0 || year%400 ==0)\{  
122.                       date = 29;  
123.                       mouth = mouth -1;  
124.                      \}else \{  
125.                          date = 28;  
126.                          mouth = mouth -1;  
127.                          \}  
128.                    break; //三月一日 再剪一天  月份减一 日期为根据是否是闰年来判断 日期  
129.             case 5:  
130.             case 7:  
131.             case 10:  
132.                  date = 30;  
133.                  mouth = mouth -1;  
134.                  break; //这些月一日 再剪一天  月份减一 日期为30  
135.             \}  
136.         \}else\{  
137.             date = date-1;  
138.             \}  
139.       
140.     document.getElementById("beginTime").innerHTML = year+"/"\+mouth+"/"\+date; //拼接字符串插入到标签中  
141.       
142.     \}  
143.

[Center]: /images/20220527/30e16feccc124276a31ca9dd49c95c8f.png
[view plain]: https://blog.csdn.net/sinat_16463137/article/details/61925606#