原生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 相关文章推荐
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
纯js简单日历实现代码
Oct 05 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
django 创建过滤器的实例详解
2017/08/14 Python
python查询mysql,返回json的实例
2018/03/26 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
基于python 取余问题(%)详解
2020/06/03 Python
三个儿子教学反思
2014/02/03 职场文书
承诺书怎么写
2014/03/26 职场文书
秋天的图画教学反思
2014/05/01 职场文书
安全目标责任书
2014/07/22 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
交流会主持词
2015/07/02 职场文书
2016年元旦致辞
2015/08/01 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
导游词之太湖
2019/10/08 职场文书