小編給大家分享一下原生JS如何實(shí)現(xiàn)左右箭頭選擇日期，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),蓬江企業(yè)網(wǎng)站建設(shè),蓬江品牌網(wǎng)站建設(shè),網(wǎng)站定制,蓬江網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,蓬江網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

先上個(gè)效果圖，就是用左右尖括號可改變中間日期的值。（點(diǎn)擊中間顯示區(qū)域有時(shí)間選擇器彈框，用的插件就不說了，主要說自己原創(chuàng)的部分）              

                                                  

HTML部分 (左右箭頭都是用的圖片素材，網(wǎng)上一大把，這里我就顯示我本地地址了)

 
   onclick="reducedate()"> 
    
   onclick="adddate()"> 

HTML部分沒什么可說的

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

function adddate(){
 //向右跳轉(zhuǎn)時(shí)間（加時(shí)間）的按鈕
 var s = document.getElementById("beginTime").innerHTML;
 var arr = s.split("/"); //將獲取的數(shù)組按“/”拆分成字符串?dāng)?shù)組
 var year = parseInt(arr[0]);//開分字符串?dāng)?shù)組的第一個(gè)地址的內(nèi)容是年份
 var mouth = parseInt(arr[1]);//開分字符串?dāng)?shù)組的第二個(gè)地址的內(nèi)容是月份
 var date = parseInt( arr[arr.length-1]);//開分字符串?dāng)?shù)組的第三個(gè)地址的內(nèi)容是日期
 if(date == 28){//當(dāng)日期為28號時(shí) 只判斷是否是2月
 switch(mouth)
 {
  case 2:
  if(year % 4 == 0 && year % 100 !=0 || year%400 ==0){
  date = date +1;
  } //如果是閏年2月 日期就加一
  else {
  date = 1;
   mouth = mouth +1;
  } //不是閏年2月 日期就變?yōu)? 月份加一
 }
 }else if(date == 29){ //當(dāng)日期為29號是 也是判斷是否是2月
 switch(mouth)
 {
  case 2:
  date = 1;
  mouth = mouth +1;
 } //當(dāng)29號出現(xiàn)必定是閏年 日期變?yōu)? 月份加一
 }else if(date == 30){ //當(dāng)日期為30 時(shí)
 switch(mouth)
  {
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12: 
  date = date +1;
  break; //這些月份的時(shí)候一個(gè)月有31天 到30的時(shí)候再加一
  case 4:
  case 6:
  case 9:
  case 11: 
  date = 1;
  mouth = mouth +1;
  break; //這些月份的時(shí)候一個(gè)月有30天 到30的時(shí)候 日期變?yōu)? 月份加一
  }
 }else if(date == 31){
 switch(mouth)
  {
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  date = 1;
  mouth = mouth+1;
  break; //這些月份的時(shí)候一個(gè)月有31天 到31的時(shí)候 日期為1月份加一
  case 12: 
  date = 1;
  mouth = 1;
  year = year+1;;
  break; //十二月 的 31 號 日期變?yōu)橐?nbsp;月份變?yōu)橐?nbsp;年份加一
  }
 }else{
  date +=1;
  }
 document.getElementById("beginTime").innerHTML = year+"/"+mouth+"/"+date;
 }
function reducedate(){
 //向左跳轉(zhuǎn)時(shí)間（減時(shí)間）的按鈕
 var s = document.getElementById("beginTime").innerHTML;
 var arr = s.split("/"); //將獲取的數(shù)組按“/”拆分成字符串?dāng)?shù)組
 var year = parseInt(arr[0]);//開分字符串?dāng)?shù)組的第一個(gè)地址的內(nèi)容是年份
 var mouth = parseInt(arr[1]);//開分字符串?dāng)?shù)組的第二個(gè)地址的內(nèi)容是月份
 var date = parseInt( arr[arr.length-1]);//開分字符串?dāng)?shù)組的第三個(gè)地址的內(nèi)容是日期
 if(date == 1){//當(dāng)日期為1時(shí)，再剪就會改變月份，甚至年份
 switch(mouth){
 case 1:
  date = 31;
  mouth = 12;
  year = year-1;
  break; //一月一日 再剪一天 年份減一 月份為12 日期為31
  case 2:
 case 4:
 case 6:
 case 8:
 case 9:
 case 11:
  date = 31;
  mouth = mouth-1;
  break; //這些月一日 再剪一天 月份減一 日期為31
 case 3:
   if(year % 4 == 0 && year % 100 !=0 || year%400 ==0){
  date = 29;
  mouth = mouth -1;
  }else {
  date = 28;
  mouth = mouth -1;
  }
   break; //三月一日 再剪一天 月份減一 日期為根據(jù)是否是閏年來判斷 日期
 case 5:
 case 7:
 case 10:
  date = 30;
  mouth = mouth -1;
  break; //這些月一日 再剪一天 月份減一 日期為30
 }
 }else{
 date = date-1;
 }
 document.getElementById("beginTime").innerHTML = year+"/"+mouth+"/"+date; //拼接字符串插入到標(biāo)簽中
 }

寫個(gè)使用API吧：

向左尖括號（減少時(shí)間）

onclick="reducedate("tagid")"; 
/span>

向右尖括號（增加時(shí)間）

onclick="adddate()("tagid")"; 
/span>

代碼可復(fù)制到自己的JS中，也可插入。

以上是“原生JS如何實(shí)現(xiàn)左右箭頭選擇日期”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：原生JS如何實(shí)現(xiàn)左右箭頭選擇日期-創(chuàng)新互聯(lián)
當(dāng)前地址：http://weahome.cn/article/cejoph.html