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
CSS3 zum Erzielen eines einfachen schwebenden Hintergrundeffekts mit weißen Wolken
Dies ist ein sehr einfacher, reiner CSS3-Hintergr...
Implementierung eines CSS-Festlayouts auf beiden Seiten und eines adaptiven Layouts in der Mitte
Analysieren Sie vier gängige Methoden und Prinzip...
Zwei Implementierungscodes der programmgesteuerten Navigation mit Vue-Router
Zwei Möglichkeiten zum Navigieren auf der Seite D...
Zusammenfassung der Probleme bei der Installation von MySQL 5.7.19 unter Linux
Als ich MySQL zum ersten Mal auf meiner virtuelle...
Detaillierte Erklärung der MySQL/Java-Server-Unterstützung für Emoji und Problemlösung
Dieser Artikel beschreibt die Support- und Proble...
Ursachen und Lösungen für Verzögerungen bei der MySQL-Master-Slave-Synchronisierung
Aus historischen Gründen basiert die MySQL-Replik...
Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete von MySQL 5.7.17
Da es im Internet nur wenige und unzureichende In...
Details zur JS-Array-Deduplizierung
Inhaltsverzeichnis 1 Testfälle 2 JS-Array-Dedupli...
Vue implementiert Beispielcode für benutzerdefinierte „modales Popup-Fenster“-Komponente
Inhaltsverzeichnis Vorwort Rendern Beispielcode Z...
Detaillierte Erklärung der Verwendung von Refs in den drei Hauptattributen von React
Inhaltsverzeichnis Klassenkomponente Funktionale ...
Zusammenfassung der Situationen, in denen MySQL-Indizes nicht verwendet werden
Indextypen in MySQL Im Allgemeinen können sie in ...
So verstehen Sie das Ref-Attribut von React genau
Inhaltsverzeichnis Überblick 1. Erstellen eines R...
Beispielcode zur Implementierung eines einfachen ListViews-Effekts in HTML
HTML zum Erreichen eines einfachen ListViews-Effe...
Vorteile und Nachteile des MySQL Advanced Learning Index sowie Nutzungsregeln
1. Vor- und Nachteile von Indizes Vorteile: schne...
JavaScript, um das Bild mit der Maus zu bewegen
In diesem Artikel wird der spezifische JavaScript...