原生JS實(shí)現(xiàn)左右箭頭選擇日期實(shí)例代碼
先上個(gè)效果圖,就是用左右尖括號(hào)可改變中間日期的值。(點(diǎn)擊中間顯示區(qū)域有時(shí)間選擇器彈框,用的插件就不說了,主要說自己原創(chuàng)的部分)
HTML部分 (左右箭頭都是用的圖片素材,網(wǎng)上一大把,這里我就顯示我本地地址了)
<div> <span class="leftspan" <span style="color:#FF0000;">onclick="reducedate()"</span>><img src="IMG/return.png" style="height:100%; width:100%;"/></span> <label id="beginTime" class="kbtn"></label> <span class="rightspan" <span style="color:#FF0000;">onclick="adddate()"</span>><img src="IMG/right.png" style="height:100%; width:100%;"</span> </div>
HTML部分沒什么可說的
下面原生JS部分了(底部有本插件附件,歡迎各路朋友評(píng)論交流)
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號(hào)時(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號(hào)是 也是判斷是否是2月 switch(mouth) { case 2: date = 1; mouth = mouth +1; } //當(dāng)29號(hào)出現(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 號(hào) 日期變?yōu)橐?月份變?yōu)橐?年份加一 } }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í),再剪就會(huì)改變?cè)路?,甚至年? 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吧:
向左尖括號(hào)(減少時(shí)間)
<span style="color:#FF0000;">onclick="reducedate("tagid")"; /span>
向右尖括號(hào)(增加時(shí)間)
<span style="color:#FF0000;">onclick="adddate()("tagid")"; /span>
代碼可復(fù)制到自己的JS中,也可插入。
以上所述是小編給大家介紹的原生JS 左右箭頭選擇日期實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序開發(fā)(三):返回上一級(jí)頁(yè)面并刷新操作示例【頁(yè)面?!?/a>
這篇文章主要介紹了微信小程序開發(fā)返回上一級(jí)頁(yè)面并刷新操作,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序返回上一級(jí)頁(yè)面并刷新操作方法技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-06-06js removeChild 障眼法 可能出現(xiàn)的錯(cuò)誤
js removeChild 障眼法之可能出現(xiàn)的錯(cuò)誤,大家看下代碼就知道了。2009-10-10微信小程序?qū)隫ant報(bào)錯(cuò)VM292:1 thirdScriptError的解決方法
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)隫ant報(bào)錯(cuò)VM292:1 thirdScriptError的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08js知識(shí)點(diǎn)總結(jié)之getComputedStyle的用法
getComputedStyle是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值,下面這篇文章主要給大家介紹了關(guān)于js知識(shí)點(diǎn)總結(jié)之getComputedStyle用法的相關(guān)資料,需要的朋友可以參考下2022-10-10JavaScript 學(xué)習(xí)點(diǎn)滴記錄
HTML DOM (Document Object Model文檔對(duì)象模型) DOM是一種與瀏覽器,平臺(tái),語言的接口,使得你可以訪問頁(yè)面其他的標(biāo)準(zhǔn)組件. DOM是以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或信息片斷的集合.2009-04-04使用bootstraptable插件實(shí)現(xiàn)表格記錄的查詢、分頁(yè)、排序操作
這篇文章主要介紹了 使用bootstraptable插件實(shí)現(xiàn)表格記錄的查詢、分頁(yè)、排序操作,需要的朋友可以參考下2017-08-08javascript設(shè)計(jì)模式 – 中介者模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 中介者模式,結(jié)合實(shí)例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04