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

 更新时间:2017年03月14日 08:47:47   作者:realpzyyy  
原生JS 左右箭头选择日期,就是用左右尖括号可改变中间日期的值,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下

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

                                                  

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中,也可插入。

以上所述是小编给大家介绍的原生JS 左右箭头选择日期实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 微信小程序数字滚动插件使用详解

    微信小程序数字滚动插件使用详解

    这篇文章主要介绍了微信小程序数字滚动插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • JavaScript库之vanilla-tilt使用教程(一个平滑的3D倾斜库)

    JavaScript库之vanilla-tilt使用教程(一个平滑的3D倾斜库)

    vanilla-tilt.js是Javascript中一个平滑的3D倾斜库,可以让网页的一些控件变得动态起来,下面这篇文章主要给大家介绍了关于JavaScript库之vanilla-tilt使用的相关资料,需要的朋友可以参考下
    2023-02-02
  • 简单实用的网页表格特效

    简单实用的网页表格特效

    简单实用的网页表格特效...
    2006-07-07
  • Javascript 中介者模式实例

    Javascript 中介者模式实例

    在页面上,用户会有很多的操作 ,每进行一次操作我们需要去展示操作的结果,在这里我们有了一个问题,我们应如何去展示不同的结果呢?
    2009-12-12
  • js 删除数组的几种方法小结

    js 删除数组的几种方法小结

    本篇文章主要是对js中删除数组的几种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JS实现输入框提示文字点击时消失效果

    JS实现输入框提示文字点击时消失效果

    这篇文章主要介绍了JS实现输入框提示文字点击时消失效果,涉及javascript针对鼠标的响应及事件监听机制相关技巧,需要的朋友可以参考下
    2016-07-07
  • 一个可以随意添加多个序列的tag函数

    一个可以随意添加多个序列的tag函数

    由于在没有规划好的情况下写的这个代码,写的比较粗糙,也没有添加注释。 JavaScript代码和HTML完全分离;可以随意添加多个子div标签,自动扩展
    2009-07-07
  • JavaScript实现图片DIV竖向滑动的方法

    JavaScript实现图片DIV竖向滑动的方法

    这篇文章主要介绍了JavaScript实现图片DIV竖向滑动的方法,涉及javascript操作div层的相关技巧,需要的朋友可以参考下
    2015-04-04
  • JS实现简单计数器

    JS实现简单计数器

    这篇文章主要为大家详细介绍了JS实现简单计数器,有加、减和零三个按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript实现表单验证示例

    JavaScript实现表单验证示例

    这篇文章主要为大家详细介绍了JavaScript实现表单验证示例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论