欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

原生JS实现左右箭头选择日期实例代码

时间:2020-10-24 11:43:44|栏目:JavaScript代码|点击:

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

                                                  

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月 日期就变为1 月份加一
 }
 }else if(date == 29){ //当日期为29号是 也是判断是否是2月
 switch(mouth)
 {
  case 2:
  date = 1;
  mouth = mouth +1;
 } //当29号出现必定是闰年 日期变为1 月份加一
 }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的时候 日期变为1 月份加一
  }
 }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 号 日期变为一 月份变为一 年份加一
  }
 }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中,也可插入。

上一篇:JavaScript中的this关键字使用方法总结

栏    目:JavaScript代码

下一篇:JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

本文标题:原生JS实现左右箭头选择日期实例代码

本文地址:http://www.codeinn.net/misctech/15280.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有