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:
|
<<: So verstehen und identifizieren Sie Dateitypen in Linux
>>: Tutorial zur Installation und Konfiguration von MySQL 5.7
Artikel empfehlen
So ändern Sie das ROOT-Passwort in MySql8.0 und höheren Versionen richtig
Bereitstellungsumgebung: Installationsversion Red...
Verwenden Sie den Befehl ip netns in Linux, um den Netzwerkport zu isolieren und die IP-Adresse zu konfigurieren
1. Fügen Sie den Isolationsmarker hinzu: ip netns...
So konfigurieren Sie die virtuelle Benutzeranmeldung in vsftpd
yum installiere vsftpd [root@localhost usw.]# yum...
Implementierung der MySQL-Benutzerrechteverwaltung
1. Einführung in MySQL-Berechtigungen Es gibt 4 T...
Detaillierte Erklärung des Linux-Befehls unzip
Inhaltsverzeichnis 1. Unzip-Befehl 1.1 Syntax 1.2...
Nofollow sorgt dafür, dass die Links in Kommentaren und Nachrichten wirklich funktionieren
Kommentare und Nachrichten waren ursprünglich ein...
Einführung in die Parameter und Regeln für reguläre Ausdrücke bei Nginx
Vorwort In letzter Zeit habe ich Kunden dabei geh...
Frameset über Iframe in Body einfügen
Da Frameset und Body auf derselben Ebene liegen, k...
Ändern Sie die Dateiberechtigungen (Eigentum) unter Linux
Linux und Unix sind Mehrbenutzer-Betriebssysteme,...
CSS-Spezifikation BEM CSS und OOCSS Beispielcode detaillierte Erklärung
Vorwort Aufgrund der unterschiedlichen Codiergewo...
Beispiel für die Verwendung von Javascript zum Ziehen und Tauschen von Div-Positionen
1 Umsetzungsprinzip Dies geschieht mithilfe der E...
Implementierungsbeispiel zum Hochladen mehrerer Anhänge in Vue
Inhaltsverzeichnis Vorwort Kerncode Datei zeigt e...
Problem mit dem Timeout der Zookeeper-Anforderung in Dubbo: Konfiguration der Verbindung von Mybatis+Spring mit MySQL8.0.15
Ich werde in diesen zwei Tagen Java wiederholen, ...
Mysql | Detaillierte Erklärung der Fuzzy-Abfrage mit Platzhaltern (wie, %, _)
Wildcard-Kategorien: %Prozent-Platzhalter: Gibt a...
So verwenden Sie Docker zum Erstellen eines Tomcat-Clusters mit Nginx (mit Bildern und Text)
Erstellen Sie zunächst einen Tomcat-Ordner. Um di...