Этот пример разделяет конкретный код для JavaScript для реализации дат выбора скольжения для вашей ссылки. Конкретный контент заключается в следующем
$ (page) .on ('touchmove', '#touchmovetime', function (event) {touchmove (event);}); scrollbarinit (); // инициализировать функцию scrollbarinit () {var defaultValue = 3, maxValue = 30; var mydate = new Date (); var Year = mydate.getfyear (); var month = mydate.getmonth () + 1; // Получить текущий месяц (0-11,0 представляет январь) var date = mydate.getDate (); var day = новая дата (год, месяц, 0); var daycount = day.getDate (); // Получить количество дней в этом месяце: if ((date + defaultValue)> DayCount) {if (месяц == 12) {месяц = 1; Год = год + 1; } else {месяц = месяц + 1; } date = (date + defaultValue) - DayCount; } else {date = date + defaultValue; } if (месяц <10) {месяц = "0"+месяц; } 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.getfyear (); var month = mydate.getmonth () + 1; // Получить текущий месяц (0-11,0 представляет январь) var date = mydate.getDate (); var tran_currentx = ''; var startOffSet = parseInt ($ ('#touchmovetime'). offset (). слева); var endoffset = parseint ($ ('#touchright'). offset (). слева); var _limit = endoffset - startOffSet; var touchmovetimeOffSetleft = $ ('#scroll_track'). offset (). слева; var touch = event.touches [0]; var endx = touch.pagex; var currentx = endx - touchmovetimeoffsetleft; var TimeValue = math.round (maxValue * (currentX / $ ("#touchmovetime"). Width ())); // текущее значение Tick 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 (); // Получить количество дней месяца, если ((дата + timeValue)> DayCount) {if (месяц == 12) {месяц = 1; Год = год + 1; } else {месяц = месяц + 1; } date = (date + timevalue) - DayCount; } else {date = date + timeValue; } if (месяц <10) {месяц = "0"+месяц; } if (date <10) {date = "0"+date; } $ ('#endtime'). attr ('value', year+'-'+month+'-'+date); }}<div> <pan> 3 дня </span> <div id = "touchmovetime"> <div id = "scroll_track"> </div> <div id = "scroll_thumb"> </div> </div> <span id = "touchright"> 30 дней </span> </div>
.jzrqdiv {позиция: относительно; Верх: 15px; Высота: 10px; граница-радий: 20px; Фон: #EFEF; Box-Shadow: вставка 0 1PX 2PX RGBA (0,0,0, .15); } 2 #scroll_track {position: Absolute; Верх: 0; Высота: 10px; граница-радий: 20px; Фон: #2399DC; z-index: 10;} 3 .spirit {position: Absolute; Верх: -9px; Ширина: 30px; Высота: 30px; линия линии: 30px; размер шрифта: 30px; граница-радий: 50%; цвет: #ddd; Фон: #ffff; Z-Index: 11; Transform: Translate (0,0);}Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.