jQuery implementiert einen Zeitselektor

jQuery implementiert einen Zeitselektor

In diesem Artikelbeispiel wird der spezifische Code von jQuery zur Implementierung des Zeitselektors zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Effektbild:

Code:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-kompatibel" content="IE=Edge,chrome=1">
  <meta name="flexibel" content="initial-dpr=2" />
  <meta name="Ansichtsfenster"
   Inhalt = "Breite = Gerätebreite, Anfangsmaßstab = 1, Mindestmaßstab = 1, Maximalmaßstab = 1, Benutzerskalierung = nein" />
  <meta name="author" content="bright2017" />
  <title>Zeitauswahl</title>
  <style type="text/css">
   ul,li{
    Listenstil: keiner;
   }
   div{
    Box-Größe: Rahmenbox;
   }
   /* Maskenebene*/
   .versteckte_Ansicht {
    Breite: 100 %;
    Hintergrund: #000000;
    Deckkraft: 0,7;
    Position: fest;
    links: 0;
    oben: 0;
    Z-Index: 9;
    Anzeige: keine;
   }
   .biegen{
    Anzeige: Flex;
   }
   .Abrechnungscentzeit {
    Breite: 100 %;
    Position: fest;
    links: 0;
    oben: 0;
    Z-Index: 99;
    Anzeige: keine;
   }
   .billing_cent_data {
    Breite: 100 %;
    Höhe: 100%;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
   }
   
   .Abrechnungsauswahl {
    Breite: 230px;
    Höhe: 230px;
    Hintergrund: #FFFFFF;
    Position: relativ;
    Rahmenradius: 3px;
   }
   .billing_select_top>div {
    Textausrichtung: zentriert;
    Schriftgröße: 15px;
    Höhe: 55px; Zeilenhöhe: 55px;
   }
   .Abrechnungszeit {
       Breite: 100 %;
       Inhalt ausrichten: zentriert;
       Elemente ausrichten: zentrieren;
       Schriftgröße: 15px;
       Polsterung: 0 20px;
   }
   .Abrechnungszeit>div {
       Breite: berechnet ((100 % – 30 Pixel)/3);
       Textausrichtung: zentriert;
       Schriftstärke: fett;
   }
   .billing_select_center_new>ul {
       Breite: berechnet ((100 % – 30 Pixel)/3);
       Höhe: 100%;
       Überlauf: automatisch;
       Polsterung: 47px 0;
    Box-Größe: Rahmenbox;
   }
   .billing_select_center_new>ul>li {
       Breite: 100 %;
       Höhe: 47px;
       Zeilenhöhe: 47px;
       Schriftgröße: 15px;
       Textausrichtung: zentriert;
       Deckkraft: .5;
   }
   .billing_time>div:nth-child(2), .billing_select_center_new>ul:nth-child(2) {
       Rand: 0 15 px;
   }
   .Abrechnungsauswahlcenter {
    Breite: 100 %;
    Höhe: 141px;
    Polsterung: 0 20px;
    Überlauf: versteckt;
    Position: relativ;
   }
   .billing_select_center_new {
       Breite: 100 %;
       Höhe: 100%;
       Box-Größe: Rahmenbox;
       Inhalt ausrichten: zentriert;
       Elemente ausrichten: zentrieren;
   }
   .billing_select_bot {
    Breite: 100 %;
    Textausrichtung: zentriert;
    Höhe: 45px;
    Zeilenhöhe: 45px;
    Hintergrund: #EEEEEE;
    Textausrichtung: zentriert;
    Position: absolut;
    links: 0;
    unten: 0;
    Z-Index: 3;
    Rahmenradius: 3px;
   }
   
   .billing_select_center>ul {
    Breite: 100 %;
    Höhe: 100%;
    Überlauf: automatisch;
    Polsterung: 47px 0;
    Position: absolut;
    links: 0;
    oben: 0;
    Z-Index: 3;
   }
   
   .billing_select_center>ul>li {
    Breite: 100 %;
    Höhe: 47px;
    Zeilenhöhe: 47px;
    Schriftgröße: 0,4rem;
    Textausrichtung: zentriert;
    Deckkraft: .5;
   }
   
   .Abrechnungsauswahlborder {
    Breite: berechnet (100 % – 40 Pixel);
    links: 20px;
    Höhe: 1px;
    Position: absolut;
    oben: 47px;
    Hintergrundfarbe: #F2F2F2;
   }
   .billing_select_border2 {
       Breite: berechnet (100 % – 40 Pixel);
       links: 20px;
       Höhe: 1px;
       Position: absolut;
       oben: 94px;
       Hintergrundfarbe: #F2F2F2;
   }
   
   .Abrechnungsopacity {
    Deckkraft: 1 !wichtig;
   }
   .Endzeit{
    Breite: 100px; Höhe: 40px; Zeilenhöhe: 40px; Rahmenradius: 5px;
    Textausrichtung: zentriert; Rand: 50px automatisch; Schriftgröße: 17px;
   }
   .Zeitwert{
    Textausrichtung: zentriert; Schriftgröße: 17px;
   }
  </Stil>
 </Kopf>
 <Text>
  <div class="end_time">Uhrzeit auswählen</div>
  <div Klasse="Zeit_Wert"></div>
  <!-- Maskenebene-->
  <div Klasse="hidden_view"></div>
  <!-- Datum -->
  <div Klasse="Abrechnungs-Centzeit">
   <div Klasse="billing_cent_data flex">
    <div Klasse="Abrechnungsauswahl Abrechnungsauswahl2">
     <div Klasse="Abrechnung_Auswahl_oben">
      <div>Bitte wählen Sie die Frist aus</div>
     </div>
     <div Klasse="flexible Abrechnungszeit">
      <div>Jahr</div>
      <div>Monat</div>
      <div>Sonstiges</div>
     </div>
     <div Klasse="Abrechnungsauswahlcenter">
      <div Klasse="billing_select_center_new flex">
       <ul Klasse="Abrechnungszeitpunkt_eins">
        <li class="billing_opacity">2020</li>
        <li>2021</li>
        <li>2022</li>
        <li>2023</li>
        <li>2024</li>
        <li>2025</li>
        <li>2026</li>
        <li>2027</li>
        <li>2028</li>
        <li>2029</li>
        <li>2030</li>
        <li>2031</li>
        <li>2032</li>
        <li>2033</li>
        <li>2034</li>
        <li>2035</li>
        <li>2036</li>
        <li>2037</li>
        <li>2038</li>
        <li>2039</li>
        <li>2040</li>
        <li>2041</li>
        <li>2042</li>
        <li>2043</li>
        <li>2044</li>
        <li>2045</li>
        <li>2046</li>
        <li>2047</li>
        <li>2048</li>
        <li>2049</li>
        <li>2050</li>
       </ul>
       <ul Klasse="Abrechnungszeit_zwei">
        <li class="billing_opacity">01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
       </ul>
       <ul Klasse = "Abrechnungszeit_drei"></ul>
      </div>
      <div Klasse="billing_select_border"></div>
      <div Klasse="billing_select_border2"></div>
     </div>
     <div Klasse="Abrechnungsauswahlbot">
      OK
    </div>
   </div>
  </div>
  <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
  <Skripttyp="text/javascript">
   $(Funktion() {
    var heg = $(window).height();
    $(".hidden_view").höhe(heg);
    $(".billing_cent_time").höhe(heg);
    // Auf Scroll-Ereignisse achten var scroll_year_index = '2020'; //Jahr var scroll_month_index = '01'; //Monat var scroll_day_index = '01'; //Tage//Jahr const $ScrollWrap = $(".billing_time_one");
    // Monat const $ScrollWrap_month = $(".billing_time_two");
    // Tag const $ScrollWrap_day = $(".billing_time_three");
    // Auf Scroll-Stopp warten let t1 = 0;
    sei t2 = 0;
    let timer = null; // Timer let t3 = 0;
    sei t4 = 0;
    let timer2 = null; // Zeitgeber let t5 = 0;
    sei t6 = 0;
    let timer3 = null; // Timer // Jahres-Scrollvorgang $ScrollWrap.on("touchstart", function() {
     //Berühren Sie Start ≈ ​​Scrollen Sie Start})
    $ScrollWrap.on("scrollen", Funktion() {
     //Scrollen Sie mit „clearTimeout (Timer)“
     Timer = setzeTimeout(isScrollEnd, 100)
     t1 = $ScrollWrap.scrollTop()
    })
 
    Funktion istScrollEnd() {
     t2 = $ScrollWrap.scrollTop();
     wenn (t2 == t1) {
      //Scrollen stoppt clearTimeout(timer)
      // Ermitteln Sie den Abstand zwischen jedem Li und der oberen Grenze. var leng = $(".billing_time_one>li").length;
      für (var k = 0; k < Länge; k++) {
       var top_leng = $(".billing_time_one").children("li").eq(k).position().top;
       // Wenn der Bereich zwischen 30 und 60 liegt, wird der ausgewählte Bereich durch die Höhe bestimmt, wenn (top_leng >= 30 && top_leng <= 60) {
        scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim();
        $(".billing_time_one").children("li").removeClass("billing_opacity");
        $(".billing_time_one").children("li").eq(k).addClass("billing_opacity");
        // Der Monat wird auf 0 zurückgesetzt
        $(".billing_time_two").scrollTop(0);
        $(".billing_time_three").scrollTop(0);
        // Scrollen Sie zur entsprechenden Position und jede Li-Höhe beträgt 47px
        var scrool_heg = k * 47;
        $(".billing_time_one").scrollTop(scrool_heg);
       } anders {
        obere_Länge = obere_Länge + 15;
        if (obere_Länge >= 30 && obere_Länge <= 60) {
         scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim();
         $(".billing_time_one").children("li").removeClass("billing_opacity");
         $(".billing_time_one").children("li").eq(k).addClass("billing_opacity");
         // Der Monat wird auf 0 zurückgesetzt
         $(".billing_time_two").scrollTop(0);
         $(".billing_time_three").scrollTop(0);
         // Scrollen Sie zur entsprechenden Position und jede Li-Höhe beträgt 47px
         var scrool_heg = k * 47;
         $(".billing_time_one").scrollTop(scrool_heg);
        }
       }
      }
     }
    }
    // Monat scrollen $ScrollWrap_month.on("touchstart", function() {
     //Berühren Sie Start ≈ ​​Scrollen Sie Start})
    $ScrollWrap_month.on("scrollen", Funktion() {
     //Scrollen clearTimeout(timer2)
     Timer2 = setzeTimeout(isScrollEnd2, 100)
     t3 = $ScrollWrap_month.scrollTop()
    })
 
    Funktion isScrollEnd2() {
     t4 = $ScrollWrap_month.scrollTop();
     wenn (t4 == t3) {
      //Scrollen stoppt clearTimeout(timer2)
      // Ermitteln Sie den Abstand zwischen jedem Li und der oberen Grenze. var leng = $(".billing_time_two>li").length;
      für (var k = 0; k < Länge; k++) {
       var top_txt = $(".billing_time_two").children("li").eq(k).text().trim();
       var top_leng = $(".billing_time_two").children("li").eq(k).position().top;
       // Wenn der Bereich zwischen 30 und 60 liegt, wird der ausgewählte Bereich durch die Höhe bestimmt, wenn (top_leng >= 30 && top_leng <= 60) {
        scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();
        $(".billing_time_two").children("li").removeClass("billing_opacity");
        $(".billing_time_two").children("li").eq(k).addClass("billing_opacity");
 
        // 1 3 5 7 8 10 Dezember hat 31 Tage // Februar hat 28 Tage // 4 6 9 November Suche nach 30 Tagen $(".billing_time_three").children("li").remove();
        wenn (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt == 08 ||
         top_txt == 10 || top_txt == 12) {
         Tag31();
        }
        wenn (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) {
         Tag30();
        }
        wenn (top_txt == 02) {
         Tag28();
        }
        $(".billing_time_three").scrollTop(0);
        // Scrollen Sie zur entsprechenden Position und jede Li-Höhe beträgt 47px
        var scrool_heg = k * 47;
        $(".billing_time_two").scrollTop(scrool_heg);
       } anders {
        obere_Länge = obere_Länge + 15;
        if (obere_Länge >= 30 && obere_Länge <= 60) {
         scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();
         $(".billing_time_two").children("li").removeClass("billing_opacity");
         $(".billing_time_two").children("li").eq(k).addClass("billing_opacity");
 
         // 1 3 5 7 8 10 Dezember hat 31 Tage // Februar hat 28 Tage // 4 6 9 November Suche nach 30 Tagen $(".billing_time_three").children("li").remove();
         wenn (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt ==
          08 ||
          top_txt == 10 || top_txt == 12) {
          Tag31();
         }
         wenn (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) {
          Tag30();
         }
         wenn (top_txt == 02) {
          Tag28();
         }
         $(".billing_time_three").scrollTop(0);
         // Scrollen Sie zur entsprechenden Position und jede Li-Höhe beträgt 47px
         var scrool_heg = k * 47;
         $(".billing_time_two").scrollTop(scrool_heg);
        }
       }
      }
     }
    }
    // Tages-Scrollen $ScrollWrap_day.on("touchstart", function() {
     //Berühren Sie Start ≈ ​​Scrollen Sie Start})
    $ScrollWrap_day.on("scrollen", Funktion() {
     //Scrollen Sie mit clearTimeout (Timer3).
     Timer3 = setzeTimeout(isScrollEnd3, 100)
     t5 = $ScrollWrap_day.scrollTop()
    })
 
    Funktion isScrollEnd3() {
     t6 = $ScrollWrap_day.scrollTop();
     wenn (t6 == t5) {
      //Scrollen stoppt clearTimeout(timer3)
      // Ermitteln Sie den Abstand zwischen jedem Li und der oberen Grenze. var leng = $(".billing_time_three>li").length;
      für (var k = 0; k < Länge; k++) {
       var top_leng = $(".billing_time_three").children("li").eq(k).position().top;
       // Wenn der Bereich zwischen 30 und 60 liegt, wird der ausgewählte Bereich durch die Höhe bestimmt, wenn (top_leng >= 30 && top_leng <= 60) {
        scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim();
        $(".billing_time_three").children("li").removeClass("billing_opacity");
        $(".billing_time_three").children("li").eq(k).addClass("billing_opacity");
 
        // Scrollen Sie zur entsprechenden Position und jede Li-Höhe beträgt 47px
        var scrool_heg = k * 47;
        console.log("0000000", scrool_heg)
        $(".billing_time_three").scrollTop(scrool_heg);
       } anders {
        obere_Länge = obere_Länge + 15;
        if (obere_Länge >= 30 && obere_Länge <= 60) {
         scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim();
         $(".billing_time_three").children("li").removeClass("billing_opacity");
         $(".billing_time_three").children("li").eq(k).addClass("billing_opacity");
 
         // Scrollen Sie zur entsprechenden Position und jede Li-Höhe beträgt 47px
         var scrool_heg = k * 47;
         $(".billing_time_three").scrollTop(scrool_heg);
        }
       }
      }
     }
    }
 
    // Anzeige $(".end_time").click(function() {
     $(".hidden_view").anzeigen();
     $(".billing_cent_time").anzeigen();
    });
 
 
    // Die Standardzeit beträgt 31 Tage day31();
 
    Funktion Tag28() {
     für (var k = 1; k <= 28; k++) {
      varnum = "0" + k;
      var txt = `<li>${num}</li>`;
      var txt2 = `<li>${k}</li>`;
      wenn (k >= 10) {
       $(".billing_time_three").append(txt2);
      } anders {
       $(".billing_time_three").anhängen(txt)
      }
     }
     wenn (k >= 28) {
      $(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
     }
    }
 
    Funktion Tag30() {
     für (var k = 1; k <= 30; k++) {
      varnum = "0" + k;
      var txt = `<li>${num}</li>`;
      var txt2 = `<li>${k}</li>`;
      wenn (k >= 10) {
       $(".billing_time_three").append(txt2);
      } anders {
       $(".billing_time_three").anhängen(txt)
      }
     }
     wenn (k >= 30) {
      $(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
     }
    }
 
    Funktion Tag31() {
     für (var k = 1; k <= 31; k++) {
      varnum = "0" + k;
      var txt = `<li>${num}</li>`;
      var txt2 = `<li>${k}</li>`;
      wenn (k >= 10) {
       $(".billing_time_three").append(txt2);
      } anders {
       $(".billing_time_three").anhängen(txt)
      }
     }
     wenn (k >= 31) {
      $(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
     }
    }
 
    // Bestätigen $(".billing_select_bot").click(function() {
     console.log(scroll_year_index, "Jahr~", scroll_month_index, 'Monat~', scroll_day_index)
     var tim_cent = Scrolljahresindex + "-" + Scrollmonatsindex + '-' + Scrolltagesindex;
     $(".hidden_view").hide();
     $(".billing_cent_time").hide();
     $(".time_val").text(tim_cent);
    });
   });
  </Skript>
 </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Einführung in die Verwendung von jQuery-Selektoren
  • Detaillierte Erklärung des JQuery-Selektors
  • Detaillierte Erläuterung des Anwendungsbeispiels für den JQuery-Tag-Selektor
  • Beispiel für die Grundlagen der Verwendung eines jQuery-Selektors
  • Analyse der häufig verwendeten Auswahlfunktionen und Anwendungsbeispiele von JQuery
  • Detaillierte Erklärung zur Verwendung des jQuery-Formularselektors
  • Analyse von Verwendungsbeispielen für jQuery-Attributselektoren
  • Detaillierte Erläuterung des jQuery-Selektorattribut-Filterselektors
  • Detaillierte Erläuterung des jQuery-Selektor-Formularelement-Selektors
  • Detaillierte Erklärung der Verwendung des JQuery-Selektors

<<:  So verstehen und identifizieren Sie Dateitypen in Linux

>>:  Tutorial zur Installation und Konfiguration von MySQL 5.7

Artikel empfehlen

4 Möglichkeiten, doppeltes Einfügen von Daten in Mysql zu vermeiden

Die gebräuchlichste Methode besteht darin, einen ...

Untersuchung der MySQL-Paging-Leistung

Mehrere gängige Paging-Methoden: 1. Rolltreppenme...

Verwendung der Linux Dynamic Link Library

Im Vergleich zu gewöhnlichen Programmen haben dyn...

Zusammenfassung der Projektentwicklungspraxis in Kombination mit Vue3 von TypeScript

Inhaltsverzeichnis Überblick 1. Kompositions-API ...

Gogs+Jenkins+Docker automatisierte Bereitstellung von .NetCore-Schritten

Inhaltsverzeichnis Umgebungsbeschreibung Docker-I...

8 Tipps für Vue, die Sie nach dem Lesen lernen werden

1. Verwenden Sie immer :key in v-for Die Verwendu...

Verwenden von System.Drawing.Common in Linux/Docker

Vorwort Nachdem das Projekt auf .net Core migrier...

Der Unterschied zwischen Update und Select in MySQL für einzelne und mehrere Tabellen sowie Ansichten und temporäre Tabellen

1. Verwenden Sie Daten aus Tabelle A, um den Inha...

Detailliertes Tutorial zur Installation des Tomcat9-Windows-Dienstes

1. Vorbereitung 1.1 Laden Sie das komprimierte To...

Detaillierte Erklärung asynchroner Iteratoren in nodejs

Inhaltsverzeichnis Vorwort Was sind asynchrone It...

Detaillierte Erläuterung der Funktionen und Verwendung allgemeiner MySQL-Speicher-Engines

Dieser Artikel veranschaulicht anhand von Beispie...

So erhalten Sie ein dauerhaftes kostenloses SSL-Zertifikat von Let’s Encrypt in Docker

1. Ursache Der offizielle Cerbot ist zu nervig. E...

MySQL-Datenbank zum Abrufen der Angaben zu Sekunden, Minuten, Stunden und Tagen vor und nach

Aktuelle Uhrzeit abrufen: Wählen Sie aktuellen Ze...

Über die richtige Art und Weise der Zeitumrechnung in JS beim Excel-Import

Inhaltsverzeichnis 1. Grundlagen 2. Problembeschr...

Vergleich von div und span in HTML_PowerNode Java Academy

1. <div></div> und <span></s...