Este ejemplo comparte el código específico para JavaScript para implementar fechas de selección deslizante para su referencia. El contenido específico es el siguiente
$ (página) .on ('touchmove', '#touchmoveTime', function (event) {touchmove (evento);}); ScrollBarinit (); // Inicializar la función scrollBarInit () {var defaultValue = 3, maxValue = 30; var myDate = new Date (); var año = myDate.getTlyEar (); var mes = myDate.getMonth () + 1; // Obtenga el mes actual (0-11,0 representa enero) var fecha = myDate.getDate (); var día = nueva fecha (año, mes, 0); var daycount = day.getDate (); // Obtenga el número de días este mes: if ((fecha + defaultValue)> daycount) {if (mes == 12) {mes = 1; año = año + 1; } else {mes = mes + 1; } fecha = (fecha + defaultValue) - dayCount; } else {date = date + defaultValue; } if (mes <10) {mes = "0"+mes; } if (date <10) {date = "0"+date; } $ ("#endtime"). attr ('valor', año+'-'+mes+'-'+fecha); var currentx = $ ("#touchmovetime"). width () * (0 / maxValue); $ ('#scroll_track'). css ({width: currentx+"px"}); $ ('#scroll_thumb'). css ({transform: 'traduce (' + currentx + 'px, 0)'}); }; function touchmove (evento) {event.preventDefault (); if (! $ ('#scroll_thumb') ||! event.touches.length) return; var defaultValue = 3, maxValue = 30; var myDate = new Date (); var año = myDate.getTlyEar (); var mes = myDate.getMonth () + 1; // Obtenga el mes actual (0-11,0 representa enero) var fecha = myDate.getDate (); var tran_currentx = ''; var startOffSet = parseInt ($ ('#touchmovetime'). offset (). izquierda); var endoffset = parseInt ($ ('#touchright'). offset (). izquierda); var _limit = endoffset - startoffset; var touchMoveTimeOffSetleft = $ ('#scroll_track'). offset (). izquierda; var touch = event.Touches [0]; var endx = touch.pagex; var currentx = endx - touchMovetimeOffSetLeft; var TimeValue = Math.round (maxValue * (currentx / $ ("#touchmovetime"). width ())); // Valor de tic actual if (TimeValue <DefaultValue) {TimeValue = DefaultValue} else if (TimeValue> MaxValue) {TimeValue = maxValue; } if (currentx <_limit && currentx> 15) {$ ('#días'). Text (TimeValue); $ ('#scroll_track'). css ({width: currentx+"px"}); if (currentx <20) {tran_currentx = 0} else {tran_currentx = currentx - 20; } $ ('#scroll_thumb'). css ({transform: 'traduce (' + tran_currentx + 'px, 0)'}); var día = nueva fecha (año, mes, 0); var daycount = day.getDate (); // Obtenga el número de días del mes if ((date + timeValue)> daycount) {if (mes == 12) {mes = 1; año = año + 1; } else {mes = mes + 1; } fecha = (fecha + tiempo de tiempo) - DayCount; } else {date = date + timeValue; } if (mes <10) {mes = "0"+mes; } if (date <10) {date = "0"+date; } $ ('#endtime'). attr ('valor', año+'-'+mes+'-'+fecha); }}<Viv> <span> 3 días </span> <div id = "touchmovetime"> <div id = "scroll_track"> </div> <div id = "scroll_thumb"> </div> </div> <span id = "touchright"> 30 días </sp> </div> </div>
.jzrqdiv {posición: relativo; Arriba: 15px; Altura: 10px; Border-Radius: 20px; Antecedentes: #efefef; Shadow de caja: recuadro 0 1px 2px RGBA (0,0,0, .15); } 2 #scroll_track {posición: absoluto; arriba: 0; Altura: 10px; Border-Radius: 20px; Antecedentes: #2399DC; z-índice: 10;} 3 .spirit {posición: absoluto; arriba: -9px; Ancho: 30px; Altura: 30px; Línea de altura: 30px; Fuente de tamaño: 30px; Border-Radius: 50%; color: #DDD; Antecedentes: #ffff; Z-índice: 11; transformar: traducir (0,0);}Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.