JS-Implementierung von Countdown- und Text-Scroll-Effekt-Beispielen_Javascript-Kenntnissen-js-Tutorial-php.cn

JS-Implementierung von Countdown- und Text-Scroll-Effekt-Beispielen_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 16:32:54

Original

1227 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie man Countdown- und Text-Scroll-Effekte mit JS implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Hinweis: Im Allgemeinen werden wir einige Aktivitäten wie das Bieten in einigen Taobao-Läden sehen, von denen wir manchmal einige Countdown-Effekte sehen werden. Bei einigen jährlichen Treffen und anderen Anlässen werden wir auch einige Lotterieaktivitäten finden, von denen wir profitieren können Sehen Sie sich auch einige zufällige Scrolleffekte an. Hier möchte ich Ihnen eine Methode zur Implementierung von Countdown und Text-Scrolling vorstellen. Ich hoffe, dass sie für alle hilfreich sein kann. Dies wird hauptsächlich über js implementiert.

1. Implementierung des Countdown-Effekts

Der vollständige Code des Frontend-Teils lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Realisierung des Countdown-Effekts

Ergänzung: Lite-Version des Countdown-Effekts:

Code kopieren Der Code lautet wie folgt:

Realisierung des Countdown-Lite-Versionseffekts

Endlich können wir einen Effekt sehen, der dem Bild unten ähnelt:

2. Implementierung des Text-Scrolling-Effekts

Der Front-End-Codeteil lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Implementierung des Text-Scroll-Effekts

Das endgültige Rendering sieht wie folgt aus:

Wissensergänzung:

var myDate = new Date();

myDate.getYear(); //Das aktuelle Jahr abrufen (2 Ziffern)

myDate.getFullYear(); //Erhalte das vollständige Jahr (4 Ziffern, 1970-????)
myDate.getMonth(); //Den aktuellen Monat abrufen (0-11, 0 steht für Januar)
myDate.getDate(); //Den aktuellen Tag abrufen (1-31)
myDate.getDay(); //Erhalte die aktuelle Woche X (0-6, 0 steht für Sonntag)
myDate.getTime(); //Erhalte die aktuelle Zeit (Anzahl der Millisekunden seit 1970.1.1)
myDate.getHours(); //Erhalte die aktuellen Stunden (0-23)
myDate.getMinutes(); //Erhalten Sie die aktuellen Minuten (0-59)
myDate.getSeconds(); //Erhalte die aktuellen Sekunden (0-59)
myDate.getMilliseconds(); //Erhalte die aktuelle Anzahl an Millisekunden (0-999)
myDate.toLocaleDateString(); //Das aktuelle Datum abrufen
var mytime=myDate.toLocaleTimeString(); //Erhalten Sie die aktuelle Uhrzeit
myDate.toLocaleString( ); //Datum und Uhrzeit abrufen

Ich hoffe, dass dieser Artikel für alle bei der Webprogrammierung auf Basis von js hilfreich sein wird.