Skrypty wyświetla informacje na stronie w określonym odstępie czasu. W tym przykładzie jest to 8 sekund. Skrypt można wykorzystać np. do wyświetlania informacji o nowościach na stronie. Oczywiście oprócz tekstu można umieszczać również grafikę, jak i każdy element html.
Możliwe jest ustawienie szybkości zmiany tekstu poprzez zmianę wartości zmiennej czas. Czas podawany jest w ms (np. 8000ms = 8 sekund).
Aby umieścić skrypt na własnej stronie należy skopiować cztery elementy. Pierwszym z nich jest funkcja javascript o nazwie wiadomosc. Funkcja ta posiada parametr n, który określa kolejność wyświetlania informacji.
Poniższy zapis należy umieścić w sekcji head z znaczniku script. <script type="text/javascript">
function wiadomosc(n) {
var czas = 8000;
var tablica = new Array();
tablica[0] = "Po pierwsze
Pierwsza z 4 wiadomości. Tak właśnie działa ten skrypt. Za osiem sekund wyświetlony zostanie kolejny tekst.";
tablica[1] = "Po drugie
Druga wiadomość z ostatniej chwili. Za osiem sekund znowu następny tekst.";
tablica[2] = "Po trzecie
Trzecia wiadomość z ostaniej chwili. Nowe kredyty mieszkaniowe.";
tablica[3] = "Po czwarte
Tu czwarta wiadomość. Nowy lek na grypę w pobliskiej aptece. Jakaś treść. A teraz za osiem sekund powrót do pierwszej wiadomości. ";
document.getElementById("wiadomosc").innerHTML = tablica[n];
if (n < tablica.length-1) {
n = (n+1);
}
else {
n = 0;
}
setTimeout("wiadomosc("+n+")", czas);
}
</script>
Tu mała, ale ważna uwaga do kodu funkcji. Na stronie linijki dotyczące opisów tzn. np. tablica[n] = "" i tu następuje treść pierwszej informacji są "złamane" tzn. wygląda jakby był wciśnięty ENTER przed wyrażeniem kolejny tekst. Nie wolno łamać linii w kodzie strony - u mnie na stronie poprostu nie zmieściła się w linijce natomiast jeżeli podejrzysz kod źródłowy to zobaczysz, że jest w jednej linijce.
W sekcji body umieść następujący wpis:
<div id="wiadomosc"> </div>
W miejscu gdzie umieścisz powyższy wpis, skrypt będzie wyświetlał informacje.
Kolejną ważną rzeczą są style CSS. Umieść je w sekcji head w znaczniku style: <style type="text/css">
#wiadomosc {
width: 300px;
border: 1px solid #333333;
background-color: #ffffff;
height: 100px;
margin: 0px 0px 0px 10px;
padding : 4px;
}
</style>
Ostatni element do umieszczenia to wywołanie funkcji w momencie załadowania się strony. Wpis wygląda następująco: <body onload="wiadomosc(0);">
Jak widzisz chodzi o parametr znacznika body.
Komentarze
Brak komentarzy.
Dodaj komentarz
Zaloguj się, żeby móc dodawać komentarze.
Oceny
Dodawanie ocen dostępne tylko dla zalogowanych Użytkowników.
Proszę się zalogować lub zarejestrować, żeby móc dodawać oceny.
Brak ocen.
Logowanie
Nie jesteś jeszcze naszym Użytkownikiem? Kilknij TUTAJ żeby się zarejestrować.
