时间:2021-05-26
本文实例为大家分享了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滑动操作汇总
jquery滑动操作汇总
以上就是本文的全部内容,希望对大家的学习有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
想要制作一个日期选择框,该怎么制作选择日期的效果呢?平时我们查看电子日历的时候,可以根据年份月份日期也发生改变,并可以点击选择日期,该怎么实现这个效果呢?下面我
本文实例讲述了JavaScript实现简易的天数计算器。分享给大家供大家参考,具体如下:运行效果图如下:功能:1.支持选择日期;2.自动计算闰年;3.支持使用当
本文实例为大家分享了Javascript实现简易天数计算器的具体代码,供大家参考,具体内容如下效果图:功能:1.支持选择日期;2.自动计算闰年;3.支持使用当前
ReactNative日期时间选择组件:react-native-datepicker,支持安卓和IOS双平台,支持单独选择日期、单独选择时间和选择日期和时间,
之前在做一个手机端项目的时候,需要一个左右滑动(按周滑动)选择日期插件,而且当时这个项目没有用到Vue。当时又没有找到合适的第三方插件,就花了点时间用原生Jav