原生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 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
jquery 插件学习(五)
Aug 06 Javascript
js arguments对象应用介绍
Nov 28 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
自制PHP框架之设计模式
2017/05/07 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
Javascript变量函数浅析
2011/09/02 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
Bootstrap实现模态框效果
2019/09/30 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python编写的最短路径算法
2015/03/25 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python画微信表情符的实例代码
2019/10/09 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
给老婆的搞笑检讨书
2014/01/12 职场文书
后进生评语大全
2015/01/04 职场文书
导游词之临安白水涧
2019/11/05 职场文书
Python中requests库的用法详解
2022/06/05 Python