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

前端之家收集整理的这篇文章主要介绍了JavaScript实现移动端滑动选择日期功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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,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)'});

  1. var day = new Date(year,0);
  2. var daycount = day.getDate(); //获取本月天数
  3. if((date + Timevalue) > daycount){
  4. if(month == 12){
  5. month = 1;
  6. year = year + 1;
  7. }else{
  8. month = month + 1;
  9. }
  10. date = (date + Timevalue) - daycount;
  11. }else{
  12. date = date + Timevalue;
  13. }
  14. if(month < 10){
  15. month = "0"+month;
  16. }
  17. if(date < 10){
  18. date = "0"+date;
  19. }
  20. $('#endTime').attr('value',year+'-'+month+'-'+date);

}
}

    
Box-shadow:inset 0 1px 2px rgba(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相关文章