JavaScript实现移动端滑动选择日期功能


Posted in Javascript onJune 21, 2016

本文实例为大家分享了JavaScript实现滑动选择日期的具体代码,供大家参考,具体内容如下

$(page).on('touchmove','#touchMoveTime',function (event) {
  touchMove(event);
 });
 scrollBarInit(); //初始化
 function scrollBarInit() {
  var defaultValue = 3,maxValue = 30;
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  var date = myDate.getDate();
  var day = new Date(year,month,0);
  var daycount = day.getDate(); //获取本月天数:
  if((date + defaultValue) > daycount){
  if(month == 12){
   month = 1;
   year = year + 1;
  }else{
   month = month + 1;
  }
  date = (date + defaultValue) - daycount;
  }else{
  date = date + defaultValue;
  }
  if(month < 10){
  month = "0"+month;
  }
  if(date < 10){
  date = "0"+date;
  }

  $("#endTime").attr('value',year+'-'+month+'-'+date);
  var currentX = $("#touchMoveTime").width() * (0 / maxValue);
  $('#scroll_Track').css({width:currentX+"px"});
  $('#scroll_Thumb').css({transform:'translate(' + currentX + 'px, 0)'});

 };
 function touchMove(event) {
  event.preventDefault();
  if (!$('#scroll_Thumb') || !event.touches.length) return;
  var defaultValue = 3,maxValue = 30;
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  var date = myDate.getDate();

  var tran_currentX = '';
  var startOffset = parseInt($('#touchMoveTime').offset().left);
  var endOffset = parseInt($('#touchRight').offset().left);
  var _limit = endOffset - startOffset;
  var touchMoveTimeOffsetLeft = $('#scroll_Track').offset().left;
  var touch = event.touches[0];
  var endX = touch.pageX;
  var currentX = endX - touchMoveTimeOffsetLeft;
  var Timevalue = Math.round(maxValue * (currentX / $("#touchMoveTime").width())); //当前刻度值
  if(Timevalue < defaultValue){
  Timevalue = defaultValue
  }else if(Timevalue > maxValue){
  Timevalue = maxValue;
  }
  if(currentX < _limit && currentX > 15){
  $('#days').text(Timevalue);
  $('#scroll_Track').css({width:currentX+"px"});
  if(currentX < 20){
   tran_currentX = 0
  }else{
   tran_currentX = currentX - 20;
  }
  $('#scroll_Thumb').css({transform:'translate(' + tran_currentX + 'px, 0)'});

  var day = new Date(year,month,0);
  var daycount = day.getDate(); //获取本月天数
  if((date + Timevalue) > daycount){
   if(month == 12){
   month = 1;
   year = year + 1;
   }else{
   month = month + 1;
   }
   date = (date + Timevalue) - daycount;
  }else{
   date = date + Timevalue;
  }
  if(month < 10){
   month = "0"+month;
  }
  if(date < 10){
   date = "0"+date;
  }
  $('#endTime').attr('value',year+'-'+month+'-'+date);
  }
 }
<div class="clList">
<span class="cl-15 pull-left">3天</span>
 <div id="touchMoveTime" class="jzrqDiv cl-70 pull-left">
 <div id="scroll_Track"></div>
 
  <div class="spirit icon" id="scroll_Thumb"></div>
 </div>
 <span class="cl-15 pull-left text-right" id="touchRight">30天</span>
</div>
.jzrqDiv{position:relative; top:15px; height: 10px; border-radius: 20px; background: #efefef; box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
2 #scroll_Track{ position: absolute; top:0; height: 10px; border-radius: 20px; background: #2399dc; z-index: 10;}
3 .spirit {position: absolute; top:-9px; width: 30px;height: 30px;line-height: 30px;font-size: 30px;border-radius: 50%;color: #ddd; background: #fff; z-index: 11;transform: translate(0,0);}

JavaScript实现移动端滑动选择日期功能

更多关于滑动效果的专题,请点击下方链接查看:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 #Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 #Javascript
Javascript类型系统之String字符串类型详解
Jun 21 #Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 #Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 #Javascript
jQuery获取元素父节点的方法
Jun 21 #Javascript
JS图片定时翻滚效果实现方法
Jun 21 #Javascript
You might like
解析php时间戳与日期的转换
2013/06/06 PHP
PHP数据过滤的方法
2013/10/30 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
使用tensorflow实现线性回归
2018/09/08 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
先进个人获奖感言
2014/01/24 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
努力学习演讲稿
2014/05/10 职场文书
瘦西湖导游词
2015/02/03 职场文书
学校学期工作总结
2015/08/13 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技