Javascript-News-Ticker

Diskutiert, wie man eine JavaScript-News-Ticker, die über RSS-Feed.

Gestern habe ich mit einem einfachen Skript beschreibt, wie Sie sich leicht konsumieren als RSS-Feed auf Ihre Website. Jedoch nur die Anzeige Schlagzeilen ist nicht so cool. Nein, mit den Schlagzeilen-Stream in einem Ticker ist viel schöner.

Immer noch mit Yahoo! News als eine Quelle, die wir heute diskutieren, wie sie verbrauchen einen RSS News Feed in einem Ticker.

Der folgende Code funktioniert der Trick.

Funktion GetNewsSource () (
var itemNodes = rss.selectNodes ( "/ rss / channel / item")
var Imax = itemNodes.length

sText = itemNodes.item (iNews). getElementsByTagName ( "title"). Posten (0). Text
myTicker.href = itemNodes.item (iNews). getElementsByTagName ( "link"). Posten (0). Text
Ticker ()
iNews + = 1
if (iNews == Imax) (
iNews = 0
)
window.setTimeout ( "GetNewsSource ()", (90 * sText.length +4000))
)

Ticker-Funktion () (
i + = 1
myTicker.innerText = sText.substring (0, i) + "*"
if (i <sText.length) (
window.setTimeout ( "ticker ()", 90)
)
else (
i = 0
)
)
</ script>
</ head>
<body onLoad="GetNewsSource()">
<p> Yahoo! News: <a href=""> id="myTicker" </ a> </ b> </ p>
</ body>
</ html>

Wir machen viel Gebrauch von der Funktion window.setTimeout. setTimeout wird verwendet, um eine andere Funktion nach einer bestimmten Dauer. Die Dauer wird in Millisekunden angegeben.

Das Skript lädt die ersten RSS-Feed-Datei in das DOM als die Seite geladen wird. Wenn der Körper Tag-Onload-Ereignis nennen wir Funktion GetNewsSource (). Diese Funktion liest die Artikel Knoten der RSS-Datei in eine Variable nodeList und Erlöse, um die Titel-Element in die Variable sText, und die Link-Element in der Hyperlink myTicker href Eigentum. Wenn Sie fertig Funktion ruft das Skript Ticker () schreibt, die den Inhalt der sText Zeichen für Zeichen. Ticker-Funktion () führt rekursiv über die Funktion mit setTimeout jedes Zeichen geschrieben nach 90 Millisekunden.

Funktion GetNewsSource () führt außerdem rekursiv, und wir specifed (90 * sText.length +4000) als setTimeout Dauer. Dadurch wird sichergestellt, dass die nächste Ausführung nur startet nach Funktion Ticker () hat schriftlich die vollständige Inhalt der sText.

Zum runden das Skript überprüft, ob die News geschrieben ist der letzte in der Futter-, und wenn ja, setzt das Feedback auf das erste Element.

Und es geht, Ihre eigenen News-Ticker auf Ihrer Website.