Heim > Web-Frontend > js-Tutorial > JQuery imitiert den Countdown-Effekt für Xiaomi-Handy-Rush-Kaufseiten

JQuery imitiert den Countdown-Effekt für Xiaomi-Handy-Rush-Kaufseiten

WBOY
Freigeben: 2016-05-16 16:26:28
Original
1689 Leute haben es durchsucht

1. Wirkungs- und Funktionsbeschreibung

Teilen Sie dem Benutzer mit, wie viel Zeit für eine Aktivität noch übrig ist, indem Sie die Zeit sekundengenau steuern.

2. Umsetzungsprinzip

Definieren Sie zunächst die Endzeit der Aktivität. Nachdem Sie das aktuelle Jahr auf Sekunden genau berechnet haben, subtrahieren Sie die verbleibende Zeit angezeigt und Sie können sehen, wie lange es noch bis zum Abgabetermin dauert.

Hauptcode

Code kopieren Der Code lautet wie folgt:

var startTime = new Date();
//Erhalte die aktuelle Uhrzeit
startTime.setFullYear(2016, 5, 27);
//Aufruf, um das Jahr einzustellen
startTime.setHours(23);
//Aufruf zum Festlegen des Stundenfelds der angegebenen Zeit
startTime.setMinutes(59);
//Aufruf zum Festlegen des Minutenfelds der angegebenen Zeit
startTime.setSeconds(59);
//Aufruf zum Festlegen des Sekundenfelds der angegebenen Zeit
startTime.setMilliseconds(999);
//Aufruf zum Festlegen des Millisekundenfelds der angegebenen Zeit
var EndTime=startTime.getTime();
//Erhalte die Endzeit
var nMS = EndTime - NowTime.getTime();
//Subtrahiere die aktuelle Zeit von der Endzeit, um die verbleibende Zeit zu erhalten
var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
//Parameter definieren, um die Anzahl der Tage zu erhalten
var nH = Math.floor(nMS/(1000*60*60)) % 24;
//Parameter definieren, um die Stunde zu erhalten
var nM = Math.floor(nMS/(1000*60)) % 60;
//Parameter definieren, um Minuten zu erhalten
var nS = Math.floor(nMS/1000) % 60;
//Parameter definieren, um Sekunden zu erhalten. Dies ist die aktuelle Zeit

3. Betriebsumgebung
IE6 IE7 IE8 und höher Firefox und Google
Dies kann im Chrome-Browser realisiert werden

4. Erstellen Sie eine neue Datei für das komprimierte Paket aller Bilder, entpacken Sie das Paket und legen Sie es in einem Ordner ab. Nach dem Herunterladen können Sie das komprimierte Paket der Bilder sehen und herunterladen. Der Ordnername muss nicht geändert werden, da er bereits geschrieben wurde und der Pfad in HTML5 mit

übereinstimmt

5. Ändern Sie beim Speichern der erstellten HTML-Datei den Codierungstyp in (UTF-8 mit Signatur), damit einige chinesische Zeichen normal angezeigt werden können. Ändern Sie den Speichertyp (T) in (alle Dateien (*.*)). ), legen Sie die HTML5- und dekomprimierten Bildordner im selben Ordner

ab

6. Code

Code kopieren Der Code lautet wie folgt:










7. Nachdem der Countdown abgeschlossen ist, setzen Sie das versteckte Attribut der Schaltfläche auf „false“. Es ist ganz einfach~
Dieser Code stammt aus meinem Projekt. Wenn Sie Fragen haben, hinterlassen Sie bitte eine Nachricht.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage