js, um einen interessanten Countdown-Effekt zu erzielen
|
js interessanter Countdown-Fall. Zu Ihrer Information ist der spezifische Inhalt wie folgt
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.wickeln {
Überlauf: versteckt;
Breite: 500px;
Höhe: 500px;
Hintergrundfarbe: #eeeeee;
Rand: 0 automatisch;
}
h2 {
Rand oben: 20px;
Textausrichtung: zentriert;
Farbe: #fff;
}
Eingabe {
Breite: 70px;
}
.ipt {
Textausrichtung: zentriert;
Rand oben: 50px;
}
.laufen {
Breite: 100px;
Höhe: 100px;
Hintergrundfarbe: #000;
Textausrichtung: zentriert;
Zeilenhöhe: 100px;
Farbe: #fff;
Schriftgröße: 30px;
Randradius: 50 %;
Rand: 30px auto 0;
}
.juli {
Textausrichtung: zentriert;
Rand oben: 30px;
}
.sytime {
Textausrichtung: zentriert;
Rand oben: 60px;
Schriftgröße: 25px;
Farbe: #fff;
}
.sytime Spanne {
Schriftgröße: 30px;
Farbe: rot;
}
.juli span {
Schriftgröße: 18px;
Farbe: rot;
}
</Stil>
</Kopf>
<Text>
<div Klasse="wrap">
<h2>Countdown</h2>
<!-- Formular -->
<div Klasse="ipt">
Bitte geben Sie ein: <input type="text">Jahr<input type="text">Monat<input type="text">Tag</div>
<!-- Start-Schaltfläche-->
<div class="run">Starten</div>
<!-- Entfernung Zeit -->
<p class="juli">Jetzt beträgt die Entfernung zu -<span class="julitime">0000</span>-:</p>
<!-- Verbleibende Zeit -->
<div Klasse="sytime">
<span>00</span>Tage<span>00</span>Stunden<span>00</span>Minuten<span>00</span>Sekunden</div>
</div>
<Skript>
// Elemente abrufen // Formular var ipt = document.getElementsByTagName('input');
//Schaltfläche var btn = document.getElementsByClassName('run')[0];
// Entfernung Jahr var julitime = document.getElementsByClassName('julitime')[0];
// Countdown var sytime = document.getElementsByClassName('sytime')[0];
var Zeit = sytime.getElementsByTagName('span');
console.log(ipt, btn, julitime, Zeit);
var timerId = null;
// Klickereignis btn.onclick = function() {
wenn (ipt[1].Wert > 12 || ipt[2].Wert > 30) {
alert('Der Monat muss kleiner als 12 und der Tag kleiner als 30 sein');
zurückkehren;
} sonst wenn (ipt[0].value.trim() == '' || ipt[1].value.trim() == '' || ipt[2].value.trim() == '') {
alert('Inhalt darf nicht leer sein');
zurückkehren;
}
TimerId = setzeInterval(AnzahlZeit, 1000);
}
Funktion Zählzeit() {
// Eingabejahr abrufen var ipty = ipt[0].value;
// Eingabemonat abrufen var iptm = ipt[1].value;
// Holen Sie sich das Eingabedatum var iptd = ipt[2].value;
// konsole.log(ipty, iptm, iptd);
var str = ipty + '-' + iptm + '-' + iptd;
// konsole.log(str);
// Der Distanzzeit einen Wert zuweisen julitime.innerHTML = str;
// Aktuelle Distanz 1970, 1,1 Millisekunden var nowDate = +new Date();
// Eingabezeitabstand 1970,1,1 Millisekunden var inputFr = +new Date(ipty + '-' + iptm + '-' + iptd)
// Subtrahieren Sie die Anzahl der Sekunden ab jetzt in der Zukunft. var times = (inputFr - nowDate) / 1000;
var d = parseInt(Zeiten / 60 / 60 / 24) //Tage d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24) // wenn h = h < 10? '0' + h : h;
var m = parseInt(times / 60 % 60); // Punkte m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); //Sekunden s = s < 10 ? '0' + s : s;
// konsole.log(d, h, m, s);
Zeit[0].innerHTML = d;
Zeit[1].innerHTML = h;
Zeit[2].innerHTML = m;
Zeit[3].innerHTML = s;
}
</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:
|
<<: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 (Ubuntu 16.04)
>>: Einfaches MySQL-Beispiel zum Sortieren chinesischer Schriftzeichen nach Pinyin
Artikel empfehlen
Lösen Sie das Problem des Ablaufs des TLS-Zertifikats (SSL) von Docker
Problemphänomen: [root@localhost ~]# Docker-Image...
Detaillierte Erklärung zur Verwendung von NULL und NOT NULL beim Erstellen von Tabellen in MySQL
Bezüglich einiger MySQL-Spezifikationen haben man...
Detaillierte Erläuterung des Prozesses der aktiven, passiven und Webüberwachung von Zabbix im verteilten Überwachungssystem
Im vorherigen Artikel haben wir die Netzwerkerken...
Detaillierte Erklärung zum einfachen Wechseln von CSS-Themen
Ich habe meiner persönlichen Website vor Kurzem e...
Beispiel für das Einfügen eines HTML-Bilds (html add image)
Zum Einfügen von Bildern in HTML sind HTML-Tags f...
Anweisungen zur Verwendung des HTML-Tags dl dt dd
Grundaufbau: Code kopieren Der Code lautet wie fol...
Warum wird deine Like-Aussage nicht indexiert?
Vorwort Dieser Artikel zielt darauf ab, die langw...
Konfigurationscodebeispiel für Nginx-Forward- und Reverse-Proxy sowie Lastausgleichsfunktionen
In diesem Artikel werden hauptsächlich die Konfig...
So installieren und ändern Sie das Anfangskennwort von mysql5.7.18
Informationen zur Centos-Installation von MySQL f...
Detaillierte Erklärung der grundlegenden Typen von TypeScript
Inhaltsverzeichnis Boolescher Typ Nummerntypen Ze...
Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen
Problem: Die über IIS veröffentlichte Website wir...
So installieren Sie Postgres 12 + pgadmin im lokalen Docker (unterstützt Apple M1)
Inhaltsverzeichnis einführen Unterstützt Intel-CP...
So fügen Sie Spalten in einer MySQL-Datenbank hinzu, löschen und ändern sie
Dieser Artikel beschreibt anhand eines Beispiels,...
So implementieren Sie einen einfachen HTML-Videoplayer
Dieser Artikel stellt die Methode zur Implementie...
So legen Sie mit CSS eine Hintergrundunschärfe fest
Beim Erstellen einiger Seiten müssen wir häufig H...