Jak na rolující text v textovém políčku - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » JavaScript  

15. března 2001, 00.00 | V dnešním článku si ukážeme další možnost, jak oživit webové stránky - tentokrát pomocí rolujícího textu v textovém políčku.

V dnešním článku si ukážeme další možnost, jak oživit webové stránky - tentokrát pomocí posunujícího se textu v textovém políčku.

Jako již tradičně, i dnes se nejprve podíváme na to, jak to bude ve finále vypadat:

Jak na to
Nejprve vytvoříme proměnnou i, do které uložíme hodnotu 1 a jejíž význam si vysvětlíme později.

Poté si již vytvoříme samotnou funkci, která vygeneruje textové políčko:

var i = 1; function start (msg) { message = msg; document.write ('<form name="nasFormular" onSubmit="return false;"><input type="text" size=' + message.length + ' name="nasText" readonly></form>'); move(); }

Text zprávy, jež má políčko obsahovat, předáváme funkci jako parametr msg a ukládáme jej do proměnné message.

V dalším kroku funkce vygeneruje potřebný HTML kód pro vytvoření políčka - všimněte si, že velikost políčka (parametr size) je stejná jako délka textu zprávy. Ještě zde používáme parametr readonly, který znemožňuje uživateli editovat text v políčku.

Funkce move()
Na konci funkce start() voláme funkci move(), která již zajišťuje pohyb textu:

function move () { document.forms.nasFormular.nasText.value = message.substring (0 , i); if (i != message.length) { i++; setTimeout ("move()" , 50); } else { i = 1; setTimeout ("roll()" , 500); } }

V prvním řádku funkce přiřazujeme do textu políčka první znak proměnné message (v našem případě je to "B") - toho docílíme použitím metody substring - v tomto případě požadujeme část řetězce začínající prvním znakem (číslujeme od nuly) dlouhou 1 znak (jednička je uložená v proměnné i).

Poté se otestuje, jestli hodnota i není stejná jako délka textu zprávy. Pokud je tato podmínka splněna, zvýší se hodnota i o jedničku a pokračuje se opětovným spuštěním funkce move() (po uplynutí časového intervalu).

Pokud je hodnota i stejná jako délka textu zprávy, je již celý text vypsán v políčku a spustí se větev else. Ta opět uloží do proměnné i hodnotu 1 a spustí funkci roll().

Funkce roll()

function roll () { document.forms.nasFormular.nasText.value = message.substring (i , message.length); if (i != message.length) { i++; setTimeout ("roll()" , 50); } else { i = 1; setTimeout ("move()" , 500); } }

Tato funkce pracuje na obdobném principu jako funkce move(). Jediný rozdíl je v řetězci požadovaném metodou substring. Ten začíná u druhého znaku řetězce message a obsahuje tento řetězec až do konce.

Poté se zvyšuje hodnota proměnné i a řetězec se zkracuje, až je hodnota i stejná jako délka textu zprávy a spustí se větev else. Ta opět přiřadí do proměnné i jedničku a spustí znovu funkci move().

Volání funkce
Pokud si tyto funkce definujeme v hlavičce stránky, stačí již pouze zavolat funkci start(), které jako parametr předáme text zprávy, v těle stránky. V našem případě to tedy bude vypadat takhle:

<script type="text/JavaScript">start("Builder - informační server o programování");</script>

Závěrem
Zde uvedený efekt funguje bez problémů v Internet Exploreru i Netscape Mavigatoru od verze 4 výše, ale podle mého názoru by neměl dělat velké problémy ani starším verzím těchto prohlížečů, které podporují JavaScript. A to je pro dnešek vše.