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

Linux-Datei-/Verzeichnisberechtigungen und Eigentümerverwaltung

1. Übersicht über Dateiberechtigungen und Eigentu...

Beispielcode für die Codevorlage für die Linux C-Protokollausgabe

Vorwort Dieser Artikel stellt hauptsächlich den r...

Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel

Vorwort Jeder weiß, dass viele Websites mittlerwe...

jQuery implementiert einen prozentualen Fortschrittsbalken

In diesem Artikel wird der spezifische Code von j...

So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts

Ursache So importieren Sie externe Dateien in ein...

Erhalten Sie schnell Datenbankverbindungsinformationen und einige Erweiterungen über Zabbix

Hintergrund Da die Anzahl der Anwendungssysteme w...

Eine kurze Diskussion über den Linux-Signalmechanismus

Inhaltsverzeichnis 1. Signalliste 1.1. Echtzeitsi...

Erweiterte Closures in JavaScript erklärt

Inhaltsverzeichnis 1. Das Konzept der Schließung ...

Detaillierte Erläuterung der MySQL-Sicherungs- und Wiederherstellungspraxis von mysqlbackup

1. Einführung in mysqlbackup mysqlbackup ist die ...

MySQL-Passwort ist korrekt, aber keine lokale Anmeldung möglich -1045

MySQL-Passwort ist korrekt, aber keine lokale Anm...

So konfigurieren Sie Nginx, um die Zugriffshäufigkeit derselben IP zu begrenzen

1. Fügen Sie den folgenden Code zu http{} in ngin...

Probleme und Lösungen für MYSQL5.7.17-Verbindungsfehler unter MAC

Das Problem, dass MYSQL5.7.17 unter MAC keine Ver...

VMWare Linux MySQL 5.7.13 Installations- und Konfigurationstutorial

In diesem Artikel finden Sie das Tutorial zur Ins...

Verwenden Sie die Triggermethode, um ein Popup-Dialogfeld zur Dateiauswahl zu realisieren, ohne auf die Dateitypeingabe klicken zu müssen

Sie können die Trigger-Methode verwenden. In JavaS...

So überwachen Sie den Ausführungsstatus eines Docker-Container-Shell-Skripts

Szenario Das Unternehmensprojekt wird in Docker b...