Heim  >  Artikel  >  Web-Frontend  >  JS-Implementierung von Countdown- und Text-Scroll-Effekt-Beispielen_Javascript-Kenntnissen

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

WBOY
WBOYOriginal
2016-05-16 16:32:541189Durchsuche

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



Berechnen. . .





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.

Stellungnahme:
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