Este exemplo compartilha o código específico para JavaScript para implementar datas de seleção deslizante para sua referência. O conteúdo específico é o seguinte
$ (página) .on ('touchmove', '#touchmovetime', function (event) {touchmove (event);}); scrollBarinit (); // Inicialize a função scrollBarinit () {var defaultValue = 3, maxValue = 30; var mydate = new Date (); var ano = mydate.getlyear (); var mês = mydate.getmonth () + 1; // Obtenha o mês atual (0-11,0 representa janeiro) var date = mydate.getdate (); var dia = nova data (ano, mês, 0); var dayCount = dia.getDate (); // Obtenha o número de dias deste mês: if ((date + defaultValue)> DayCount) {if (mês == 12) {mês = 1; ano = ano + 1; } else {mês = mês + 1; } DATE = (DATE + defaultValue) - DayCount; } else {date = date + defaultValue; } if (mês <10) {mês = "0"+mês; } if (data <10) {date = "0"+date; } $ ("#endtime"). att ('value', ano+'-'+mês+'-'+data); 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.tuouches.length) retornar; var defaultValue = 3, maxValue = 30; var mydate = new Date (); var ano = mydate.getlyear (); var mês = mydate.getmonth () + 1; // Obtenha o mês atual (0-11,0 representa janeiro) var date = mydate.getdate (); var Tran_CurrentX = ''; var startOffset = parseint ($ ('#touchmovetime'). offset (). esquerda); var endoffset = parseint ($ ('#touchright'). Offset (). Esquerda); 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 ())); // Valor atual do tick if (timeValue <defaultValue) {timeValue = defaultValue} else if (timeValue> maxValue) {timeValue = maxValue; } if (currentx <_limit && currentx> 15) {$ ('#dias'). 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_CURENTX + 'PX, 0)'}); var dia = nova data (ano, mês, 0); var dayCount = dia.getDate (); // Obtenha o número de dias do mês if ((data + timeValue)> DayCount) {if (mês == 12) {mês = 1; ano = ano + 1; } else {mês = mês + 1; } date = (Date + TimeValue) - DayCount; } else {date = date + timeValue; } if (mês <10) {mês = "0"+mês; } if (data <10) {date = "0"+date; } $ ('#endtime'). att ('value', ano+'-'+mês+'-'+data); }}<div> <pan> 3 dias </span> <div id = "touchmovetime"> <div id = "scroll_track"> </div> <div id = "scroll_thumb"> </div> </div> <span id = "touchright"> 30 dias </span> </div>
.jzrqdiv {Position: relativo; topo: 15px; Altura: 10px; Radio de fronteira: 20px; Antecedentes: #efefef; Shadow de caixa: inserção 0 1px 2px rgba (0,0,0, .15); } 2 #scroll_track {Position: Absolute; topo: 0; Altura: 10px; Radio de fronteira: 20px; Antecedentes: #2399DC; Z-Index: 10;} 3 .Spirit {Posição: Absolute; topo: -9px; Largura: 30px; Altura: 30px; altura da linha: 30px; tamanho da fonte: 30px; radio de borda: 50%; cor: #DDD; Antecedentes: #ffff; Z-Index: 11; Transform: tradutor (0,0);}O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.