《JavaScript实现移动端滑动选择日期功能_.docx》由会员分享，可在线阅读，更多相关《JavaScript实现移动端滑动选择日期功能_.docx（7页珍藏版）》请在三一文库上搜索。
1、JavaScript实现移动端滑动选择日期功能_ 本文实例为大家分享了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 = m
2、yDate.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 = da
3、te + 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 touch
4、Move(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 start
5、Offset = parseInt($(#touchMoveTime).offset().left); var endOffset = parseInt($(#touchRight).offset().left); var _limit = endOffset - startOffset; var touchMoveTimeOffsetLeft = $(#scroll_Track).offset().left; var touch = event.touches0; var endX = touch.pageX; var currentX = endX - touchMoveTimeOffse
6、tLeft; 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(curre
7、ntX 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;
8、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-left3天/span div id=touchMoveTime class=jzrqDiv cl-70 pull-left div id=scroll_Track/div di
9、v class=spirit icon id=scroll_Thumb/div /div span class=cl-15 pull-left text-right id=touchRight30天/span /div - .jzrqDivposition: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); 以上就是本文的全部内容，盼望对大家的学习有所关心。 .