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


Posted in Javascript onMarch 14, 2017

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

原生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 左右箭头选择日期实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 #Javascript
Bootstrap笔记—折叠实例代码
Mar 13 #Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 #Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 #Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 #Javascript
jQuery+CSS3实现点赞功能
Mar 13 #Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 #Javascript
You might like
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
Yii实现简单分页的方法
2016/04/29 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
javascript时间差插件分享
2016/07/18 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
简单实现python画圆功能
2018/01/25 Python
Python continue继续循环用法总结
2018/06/10 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
演讲稿格式范文
2014/05/19 职场文书
会议邀请函
2015/01/30 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
教师节老师寄语
2015/05/28 职场文书
Python循环之while无限迭代
2022/04/30 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python