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 相关文章推荐
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
使用PHP编写的SVN类
2013/07/18 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
Python获取apk文件URL地址实例
2013/11/01 Python
python脚本实现查找webshell的方法
2014/07/31 Python
Python编写Windows Service服务程序
2018/01/04 Python
浅谈Django的缓存机制
2018/08/23 Python
Python中collections模块的基本使用教程
2018/12/07 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python 线程的五个状态
2020/09/22 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
中专生自我鉴定范文
2014/02/02 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
交通事故被告代理词
2015/05/23 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书