Dieses Beispiel teilt den spezifischen Code für JavaScript mit, um die Auswahldaten für Ihre Referenz zu implementieren. Der spezifische Inhalt ist wie folgt
$ (Seite) .on ('touchmove', '#touchMoveTime', Funktion (Ereignis) {touchMove (Ereignis);}); scrollbarinit (); // Funktionsfunktion scrollBarinit () {var defaultValue = 3, maxValue = 30; var mydate = new Date (); var Jahr = myDate.getingfoyear (); var monat = mydate.getMonth () + 1; // Erhalten Sie den aktuellen Monat (0-11,0 repräsentiert Januar) var date = myDate.getDate (); var Day = neues Datum (Jahr, Monat, 0); var taycount = day.getDate (); // Erhalten Sie die Anzahl der Tage in diesem Monat: if ((Datum + defaultValue)> DayCount) {if (monat == 12) {monat = 1; Jahr = Jahr + 1; } else {Monat = Monat + 1; } date = (Datum + defaultValue) - DayCount; } else {date = Datum + defaultValue; } if (Monat <10) {monat = "0"+Monat; } if (Datum <10) {date = "0"+Datum; } $ ("#endzeit"). attr ('value', Jahr+'-'+Monat+'-'+Datum); var currentX = $ ("#toppmovetime"). width () * (0 / maxValue); $ ('#scroll_track'). CSS ({width: currentX+"px"}); $ ('#scroll_thumb'). }; Funktion TouchMove (Ereignis) {Event.PreventDefault (); if (! $ ('#scroll_thumb') ||! event.touches.length) return; var defaultValue = 3, maxValue = 30; var mydate = new Date (); var Jahr = myDate.getingfoyear (); var monat = mydate.getMonth () + 1; // Erhalten Sie den aktuellen Monat (0-11,0 repräsentiert Januar) var date = myDate.getDate (); var tran_currentx = ''; var startOffset = parseInt ($ ('#touchMovetime'). offset (). links); var endOffset = parseInt ($ ('#toppright'). offset (). links); var _limit = EndOffset - StartOffset; var TouchMoveTimeOffsetLeft = $ ('#scroll_track'). Offset (). Links; var touch = event.touches [0]; var endx = touch.pagex; var curr CurrentX = endx - TouchMoveTimeOffsetLeft; var timeValue = math.round (maxValue * (currentX / $ ("#touchMovetime"). width ())); // aktueller Tick -Wert if (timeValue <defaultValue) {timeValue = defaultValue} else if (TimeValue> maxValue) {timeValue = maxValue; } if (currentX <_limit && currentX> 15) {$ ('#tays'). text (timeValue); $ ('#scroll_track'). CSS ({width: currentX+"px"}); if (currentX <20) {tran_currentx = 0} else {tran_currentx = currentX - 20; } $ ('#scroll_thumb'). var Day = neues Datum (Jahr, Monat, 0); var taycount = day.getDate (); // Erhalten Sie die Anzahl der Tage des Monats, wenn ((Datum + Zeitwert)> DayCount) {if (monat == 12) {monat = 1; Jahr = Jahr + 1; } else {Monat = Monat + 1; } Date = (Datum + TimeValue) - DayCount; } else {Date = Datum + Zeitwert; } if (Monat <10) {monat = "0"+Monat; } if (Datum <10) {date = "0"+Datum; } $ ('#endzeit'). attr ('value', Jahr+'-'+Monat+'-'+Datum); }}<div> <span> 3 Tage </span> <div id = "tourtMoveTime"> <div id = "scroll_track"> </div> <div id = "scroll_thumb"> </div> </div> <span id = "touchright"> 30 Tage </span> </div>
.jzrqdiv {Position: relativ; Top: 15px; Höhe: 10px; Border-Radius: 20px; Hintergrund: #efefef; Box-Shadow: Einschub 0 1PX 2PX RGBA (0,0,0, .15); } 2 #Scroll_track {Position: absolut; Top: 0; Höhe: 10px; Border-Radius: 20px; Hintergrund: #2399dc; Z-Index: 10;} 3 .Spirit {Position: absolut; Top: -9px; Breite: 30px; Höhe: 30px; Linienhöhe: 30px; Schriftgröße: 30px; Border-Radius: 50%; Farbe: #ddd; Hintergrund: #ffff; Z-Index: 11; Transform: Translate (0,0);}Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.