原生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 相关文章推荐
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
原生js开发的日历插件
Feb 04 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
JS实现灯泡开关特效
Mar 30 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中的加密功能
2006/10/09 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Python变量访问权限控制详解
2019/06/29 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python asyncio 协程库的使用
2021/01/21 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
访谈节目策划方案
2014/05/15 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
学校安全生产承诺书
2014/05/23 职场文书
2014年征兵标语
2014/06/20 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
党支部综合考察意见
2015/06/01 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android