欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實現左右箭頭選擇日期實例代碼

 更新時間:2017年03月14日 08:47:47   作者:realpzyyy  
原生JS 左右箭頭選擇日期,就是用左右尖括號可改變中間日期的值,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下

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

                                                  

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

<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部分了(底部有本插件附件,歡迎各路朋友評論交流)

function adddate(){
 //向右跳轉時間(加時間)的按鈕
 var s = document.getElementById("beginTime").innerHTML;
 var arr = s.split("/"); //將獲取的數組按“/”拆分成字符串數組
 var year = parseInt(arr[0]);//開分字符串數組的第一個地址的內容是年份
 var mouth = parseInt(arr[1]);//開分字符串數組的第二個地址的內容是月份
 var date = parseInt( arr[arr.length-1]);//開分字符串數組的第三個地址的內容是日期
 if(date == 28){//當日期為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){ //當日期為29號是 也是判斷是否是2月
 switch(mouth)
 {
  case 2:
  date = 1;
  mouth = mouth +1;
 } //當29號出現必定是閏年 日期變?yōu)? 月份加一
 }else if(date == 30){ //當日期為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)橐?月份變?yōu)橐?年份加一
  }
 }else{
  date +=1;
  }
 document.getElementById("beginTime").innerHTML = year+"/"+mouth+"/"+date;
 }
function reducedate(){
 //向左跳轉時間(減時間)的按鈕
 var s = document.getElementById("beginTime").innerHTML;
 var arr = s.split("/"); //將獲取的數組按“/”拆分成字符串數組
 var year = parseInt(arr[0]);//開分字符串數組的第一個地址的內容是年份
 var mouth = parseInt(arr[1]);//開分字符串數組的第二個地址的內容是月份
 var date = parseInt( arr[arr.length-1]);//開分字符串數組的第三個地址的內容是日期
 if(date == 1){//當日期為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; //三月一日 再剪一天 月份減一 日期為根據是否是閏年來判斷 日期
 case 5:
 case 7:
 case 10:
  date = 30;
  mouth = mouth -1;
  break; //這些月一日 再剪一天 月份減一 日期為30
 }
 }else{
 date = date-1;
 }
 document.getElementById("beginTime").innerHTML = year+"/"+mouth+"/"+date; //拼接字符串插入到標簽中
 }

寫個使用API吧:

向左尖括號(減少時間)

<span style="color:#FF0000;">onclick="reducedate("tagid")"; 
/span> 

向右尖括號(增加時間)

<span style="color:#FF0000;">onclick="adddate()("tagid")"; 
/span> 

代碼可復制到自己的JS中,也可插入。

以上所述是小編給大家介紹的原生JS 左右箭頭選擇日期實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

  • js removeChild 障眼法 可能出現的錯誤

    js removeChild 障眼法 可能出現的錯誤

    js removeChild 障眼法之可能出現的錯誤,大家看下代碼就知道了。
    2009-10-10
  • 微信小程序導入Vant報錯VM292:1 thirdScriptError的解決方法

    微信小程序導入Vant報錯VM292:1 thirdScriptError的解決方法

    這篇文章主要給大家介紹了關于微信小程序導入Vant報錯VM292:1 thirdScriptError的解決方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-08-08
  • js知識點總結之getComputedStyle的用法

    js知識點總結之getComputedStyle的用法

    getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值,下面這篇文章主要給大家介紹了關于js知識點總結之getComputedStyle用法的相關資料,需要的朋友可以參考下
    2022-10-10
  • TypeScript常見類型及應用示例講解

    TypeScript常見類型及應用示例講解

    這篇文章主要介紹了TypeScript常見類型及應用示例講解,本章我們會講解?JavaScript?中最常見的一些類型,以及對應的描述方式,有需要的朋友可以借鑒參考下
    2022-02-02
  • JavaScript 學習點滴記錄

    JavaScript 學習點滴記錄

    HTML DOM (Document Object Model文檔對象模型) DOM是一種與瀏覽器,平臺,語言的接口,使得你可以訪問頁面其他的標準組件. DOM是以層次結構組織的節(jié)點或信息片斷的集合.
    2009-04-04
  • 使用bootstraptable插件實現表格記錄的查詢、分頁、排序操作

    使用bootstraptable插件實現表格記錄的查詢、分頁、排序操作

    這篇文章主要介紹了 使用bootstraptable插件實現表格記錄的查詢、分頁、排序操作,需要的朋友可以參考下
    2017-08-08
  • uni-app的iPhonex底部安全區(qū)域解決方案

    uni-app的iPhonex底部安全區(qū)域解決方案

    這篇文章主要為大家介紹了uni-app的iPhonex底部安全區(qū)域解決方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • 計算黃金分割的javascript代碼

    計算黃金分割的javascript代碼

    計算黃金分割的javascript代碼...
    2007-07-07
  • javascript設計模式 – 中介者模式原理與用法實例分析

    javascript設計模式 – 中介者模式原理與用法實例分析

    這篇文章主要介紹了javascript設計模式 – 中介者模式,結合實例形式分析了javascript中介者模式基本概念、原理、用法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • 最新評論