이 예제는 JavaScript의 특정 코드를 공유하여 참조의 슬라이딩 선택 날짜를 구현합니다. 특정 내용은 다음과 같습니다
$ (page) .on ( 'touchmove', '#touchmovetime', function (event) {touchMove (이벤트);}); scrollbarinit (); // 기능 초기화 ScrollBarinit () {var defaultValue = 3, maxValue = 30; var mydate = 새로운 날짜 (); var year = mydate.getlyear (); var month = mydate.getmonth () + 1; // 현재 달을 가져옵니다 (0-11,0은 1 월을 나타냅니다) var date = mydate.getDate (); var day = 새로운 날짜 (연도, 월, 0); var dayCount = day.getDate (); // 이번 달에 일수를 얻습니다 : if ((날짜 + defaultValue)> daycount) {if (month == 12) {Month = 1; 연도 = 년 + 1; } else {month = month + 1; } date = (날짜 + defaultValue) - 데이 카운트; } 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) 반환; var defaultValue = 3, maxValue = 30; var mydate = 새로운 날짜 (); var year = mydate.getlyear (); var month = mydate.getmonth () + 1; // 현재 달을 가져옵니다 (0-11,0은 1 월을 나타냅니다) var date = mydate.getDate (); var tran_currentx = ''; var startoffset = parseint ($ ( '#touchMovetIme'). offset (). 왼쪽); var endoffset = parseint ($ ( '#touchright'). offset (). 왼쪽); var _limit = endfofset -thatfoffset; 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 = 새로운 날짜 (연도, 월, 0); var dayCount = day.getDate (); // if ((날짜 + 시간 값)> daycount) {if (Month == 12) {Month = 1; 연도 = 년 + 1; } else {month = month + 1; } date = (날짜 + 시간 값) - 데이 카운트; } else {date = date + timeValue; } if (Month <10) {Month = "0"+Month; } if (date <10) {date = "0"+date; } $ ( '#endtime'). attr ( 'value', year+'-'+month+'-'+date); }}<div> <span> 3 일 </span> <div id = "t
.jzrqdiv {위치 : 상대; 상단 : 15px; 높이 : 10px; Border-Radius : 20px; 배경 : #EfeFef; Box-Shadow : inset 0 1px 2px rgba (0,0,0, .15); } 2 #scroll_track {위치 : 절대; 상단 : 0; 높이 : 10px; Border-Radius : 20px; 배경 : #2399DC; z-index : 10;} 3 .Spirit {위치 : 절대; 상단 : -9px; 너비 : 30px; 높이 : 30px; 라인 높이 : 30px; font-size : 30px; Border-Radius : 50%; 색상 : #ddd; 배경 : #ffff; z-index : 11; transform : 번역 (0,0);}위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.