当前位置:Gxlcms > JavaScript > JavaScript实现移动端滑动选择日期功能

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

时间:2021-07-01 10:21:17 帮助过:6人阅读

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

  1. $(page).on('touchmove','#touchMoveTime',function (event) {
  2. touchMove(event);
  3. });
  4. scrollBarInit(); //初始化
  5. function scrollBarInit() {
  6. var defaultValue = 3,maxValue = 30;
  7. var myDate = new Date();
  8. var year = myDate.getFullYear();
  9. var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  10. var date = myDate.getDate();
  11. var day = new Date(year,month,0);
  12. var daycount = day.getDate(); //获取本月天数:
  13. if((date + defaultValue) > daycount){
  14. if(month == 12){
  15. month = 1;
  16. year = year + 1;
  17. }else{
  18. month = month + 1;
  19. }
  20. date = (date + defaultValue) - daycount;
  21. }else{
  22. date = date + defaultValue;
  23. }
  24. if(month < 10){
  25. month = "0"+month;
  26. }
  27. if(date < 10){
  28. date = "0"+date;
  29. }
  30. $("#endTime").attr('value',year+'-'+month+'-'+date);
  31. var currentX = $("#touchMoveTime").width() * (0 / maxValue);
  32. $('#scroll_Track').css({width:currentX+"px"});
  33. $('#scroll_Thumb').css({transform:'translate(' + currentX + 'px, 0)'});
  34. };
  35. function touchMove(event) {
  36. event.preventDefault();
  37. if (!$('#scroll_Thumb') || !event.touches.length) return;
  38. var defaultValue = 3,maxValue = 30;
  39. var myDate = new Date();
  40. var year = myDate.getFullYear();
  41. var month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  42. var date = myDate.getDate();
  43. var tran_currentX = '';
  44. var startOffset = parseInt($('#touchMoveTime').offset().left);
  45. var endOffset = parseInt($('#touchRight').offset().left);
  46. var _limit = endOffset - startOffset;
  47. var touchMoveTimeOffsetLeft = $('#scroll_Track').offset().left;
  48. var touch = event.touches[0];
  49. var endX = touch.pageX;
  50. var currentX = endX - touchMoveTimeOffsetLeft;
  51. var Timevalue = Math.round(maxValue * (currentX / $("#touchMoveTime").width())); //当前刻度值
  52. if(Timevalue < defaultValue){
  53. Timevalue = defaultValue
  54. }else if(Timevalue > maxValue){
  55. Timevalue = maxValue;
  56. }
  57. if(currentX < _limit && currentX > 15){
  58. $('#days').text(Timevalue);
  59. $('#scroll_Track').css({width:currentX+"px"});
  60. if(currentX < 20){
  61. tran_currentX = 0
  62. }else{
  63. tran_currentX = currentX - 20;
  64. }
  65. $('#scroll_Thumb').css({transform:'translate(' + tran_currentX + 'px, 0)'});
  66. var day = new Date(year,month,0);
  67. var daycount = day.getDate(); //获取本月天数
  68. if((date + Timevalue) > daycount){
  69. if(month == 12){
  70. month = 1;
  71. year = year + 1;
  72. }else{
  73. month = month + 1;
  74. }
  75. date = (date + Timevalue) - daycount;
  76. }else{
  77. date = date + Timevalue;
  78. }
  79. if(month < 10){
  80. month = "0"+month;
  81. }
  82. if(date < 10){
  83. date = "0"+date;
  84. }
  85. $('#endTime').attr('value',year+'-'+month+'-'+date);
  86. }
  87. }
  1. <div class="clList">
  2.   <span class="cl-15 pull-left">3天</span>
  3. <div id="touchMoveTime" class="jzrqDiv cl-70 pull-left">
  4. <div id="scroll_Track"></div>
  5.     <div class="spirit icon" id="scroll_Thumb"></div>
  6. </div>
  7. <span class="cl-15 pull-left text-right" id="touchRight">30天</span>
  8. </div>
  1. .jzrqDiv{position:relative; top:15px; height: 10px; border-radius: 20px; background: #efefef; box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
  2. 2 #scroll_Track{ position: absolute; top:0; height: 10px; border-radius: 20px; background: #2399dc; z-index: 10;}
  3. 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);}

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

人气教程排行