jotesy, JS-14, Stwórz zegar wyświetlający na stronie WWW aktualny czas

Stwórz zegar wyświetlający na stronie WWW aktualny czas

0x01 graphic

<HTML>

<HEAD>

<!-- Ukrycie przed przeglądarkami nie obsługującymi JavaScriptów

var timerID = null

function wyswietlCzas(){

var data = new Date();

var godziny = data.getHours();

var minuty = data.getMinutes();

var sekundy = data.getSeconds();

var czas = godziny;

czas += ((minuty < 10) ? ":0" : ":") + minuty;

czas += ((sekundy < 10) ? ":0" : ":") + sekundy;

document.zegar.wyswietlacz.value = czas;

timerID = setTimeout("wyswietlCzas()",1000);

}

// Koniec kodu JavaScript -->

</SCRIPT>

</HEAD>

<H2>

<INPUT TYPE="text"

NAME="wyswietlacz"

SIZE="7"

VALUE ="">

</FORM>

</BODY>

</HTML>

W skrypcie tym wykorzystany został obiekt Date wraz z jego metodami.

Po załadowaniu strony wykonywana jest po raz pierwszy funkcja wyswietlCzas(), która startuje zegar. Następnie dzięki wierszowi timerID = setTimeout(„wyswietlCzas()”,1000); metoda ta jest co sekundę wykonywana ponownie. Konstrukcja warunkowa związana z liczbą minut i sekund jest konieczna, aby na wyświetlaczu była zawsze taka sama ilość pozycji. To znaczy, jeśli liczba minut lub sekund jest mniejsza niż 10, trzeba na początku dodać zero, inaczej zamiast np. 10:09:53 otrzymalibyśmy 10:9:53, co oczywiście byłoby efektem niepożądanym.

Ramki

Ramki pozwalają na podzielenie strony w HTML-u na niezależne części. Często spotykanym zastosowaniem jest stworzenie spisu treści strony WWW, kiedy to tytuły dokumentów pojawiają się w jednym oknie, a ich treść w drugim. Do stworzenia ramek służy polecenie <FRAMESET>, które przyjmuje następujące parametry:

<FRAMESET

ROWS = ”liczba wierszy”

COLS = ”liczba kolumn”

[onLoad = ”procedura obsługi zdarzenia”]

[onUnload = ”procedura obsługi zdarzenia”]>

[<FRAME SRC = ”URL” NAME = ”nazwa ramki”>]

</FRAMESET>

Utwórz dokument z ramkami. W ramce pierwszej umieść przyciski umożliwiające zmianę koloru tła w ramce drugiej.

0x01 graphic

Plik index.html

<HTML>

<HEAD>

<TITLE>Przykład użycia ramek</TITLE>

<HEAD>

</HEAD>

</FRAMESET>

<BODY>

Twoja przeglądarka nie obsługuje ramek!

</BODY>

</NOFRAMES>

</HTML>

Plik ramka1.html

<HTML>

<TITLE>Ramka1</TITLE>

<HEAD>

function zmienKolor (kolor){

parent.ramka2.document.bgColor = kolor;

}

</SCRIPT>

</HEAD>

<BODY>

<H2>Kliknij na przycisk, aby zmienić kolor w drugiej ramce</H2>

<FORM>

<INPUT

TYPE = "button"

NAME = "przycisk1"

VALUE = "czerwony"

onClick = "zmienKolor ('red')";

<INPUT

TYPE = "button"

NAME = "przycisk2"

VALUE = "zielony"

onClick = "zmienKolor ('green')";

<INPUT

TYPE = "button"

NAME = "przycisk3"

VALUE = "niebieski"

onClick = "zmienKolor ('blue')";

</BODY>

</HTML>

Plik Ramka2.html

<HTML>

<TITLE>Ramka1</TITLE>

<BODY>

<H2>Tutaj będą się zmieniać kolory</H2>

</BODY>

</HTML>