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

Acht Möglichkeiten zur Implementierung von Kommunikation in Vue

Inhaltsverzeichnis 1. Komponentenkommunikation 1....

Detaillierte Schritte zur Installation von Nginx unter Linux

1. Nginx-Installationsschritte 1.1 Offizielle Web...

MySQL 8.0.12 – Schnellinstallations-Tutorial

Die Installation von MySQL 8.0.12 dauerte zwei Ta...

Daten in der Layui-Tabellenzeile dynamisch bearbeiten

Inhaltsverzeichnis Vorwort Stil Funktion Beschrei...

Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen

Eine Geschichte über die Datenbankleistung Währen...

So fügen Sie die Tomcat-Serverkonfiguration zu Eclipse hinzu

1. Fenster -> Einstellungen, um das Eclipse-Ei...

Tutorial zur grundlegenden Syntax von js und zur Konfiguration von Maven-Projekten

Inhaltsverzeichnis 1. js-Anweisung Zweitens js-Ar...

Drei Vererbungsmethoden in JavaScript

erben 1. Was ist Vererbung? Vererbung: Zunächst e...

Implementierung eines einfachen Chatroom-Dialogs basierend auf WebSocket

In diesem Artikel finden Sie den spezifischen Cod...

Detailliertes Tutorial zur Installation von MySQL auf CentOS 6.9

1. Bestätigen Sie, ob MySQL installiert wurde. Si...

Mehrere Methoden zur Lösung des Problems des MySQL-Fuzzy-Abfrageindexfehlers

Wenn wir das Platzhalterzeichen „like %“ verwende...

Ideen und Codes zur Implementierung von Iframes in HTML, um die Aktualisierung der übergeordneten Seite zu steuern

1. Anwendungsszenarien Übergeordnete Seite a.jsp U...

Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)

Heute möchte ich einen Countdown von Vue und Mome...

Mysql-Optimierung Zabbix-Partitionsoptimierung

Der größte Engpass bei der Verwendung von Zabbix ...

Betrachten des Threadmodells von Tomcat aus der Connector-Komponente – BIO-Modus (empfohlen)

In höheren Versionen von Tomcat ist der Standardm...