您好,登錄后才能下訂單哦!
小編給大家分享一下原生JS如何實現(xiàn)左右箭頭選擇日期,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
先上個效果圖,就是用左右尖括號可改變中間日期的值。(點(diǎn)擊中間顯示區(qū)域有時間選擇器彈框,用的插件就不說了,主要說自己原創(chuàng)的部分)
HTML部分 (左右箭頭都是用的圖片素材,網(wǎng)上一大把,這里我就顯示我本地地址了)
<div> <span class="leftspan" <span >onclick="reducedate()"</span>><img src="IMG/return.png" /></span> <label id="beginTime" class="kbtn"></label> <span class="rightspan" <span >onclick="adddate()"</span>><img src="IMG/right.png" </span> </div>
HTML部分沒什么可說的
下面原生JS部分了(底部有本插件附件,歡迎各路朋友評論交流)
function adddate(){ //向右跳轉(zhuǎn)時間(加時間)的按鈕 var s = document.getElementById("beginTime").innerHTML; var arr = s.split("/"); //將獲取的數(shù)組按“/”拆分成字符串?dāng)?shù)組 var year = parseInt(arr[0]);//開分字符串?dāng)?shù)組的第一個地址的內(nèi)容是年份 var mouth = parseInt(arr[1]);//開分字符串?dāng)?shù)組的第二個地址的內(nèi)容是月份 var date = parseInt( arr[arr.length-1]);//開分字符串?dāng)?shù)組的第三個地址的內(nèi)容是日期 if(date == 28){//當(dāng)日期為28號時 只判斷是否是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 時 switch(mouth) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: date = date +1; break; //這些月份的時候一個月有31天 到30的時候再加一 case 4: case 6: case 9: case 11: date = 1; mouth = mouth +1; break; //這些月份的時候一個月有30天 到30的時候 日期變?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; //這些月份的時候一個月有31天 到31的時候 日期為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)時間(減時間)的按鈕 var s = document.getElementById("beginTime").innerHTML; var arr = s.split("/"); //將獲取的數(shù)組按“/”拆分成字符串?dāng)?shù)組 var year = parseInt(arr[0]);//開分字符串?dāng)?shù)組的第一個地址的內(nèi)容是年份 var mouth = parseInt(arr[1]);//開分字符串?dāng)?shù)組的第二個地址的內(nèi)容是月份 var date = parseInt( arr[arr.length-1]);//開分字符串?dāng)?shù)組的第三個地址的內(nèi)容是日期 if(date == 1){//當(dāng)日期為1時,再剪就會改變月份,甚至年份 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)簽中 }
寫個使用API吧:
向左尖括號(減少時間)
<span >onclick="reducedate("tagid")"; /span>
向右尖括號(增加時間)
<span >onclick="adddate()("tagid")"; /span>
代碼可復(fù)制到自己的JS中,也可插入。
以上是“原生JS如何實現(xiàn)左右箭頭選擇日期”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。