Zegar Analogowy

Wstęp

Zegar to jedno z podstawowych urządzeń w dzisiejszym życiu. Bez niego ciężko byłoby prowadzić biznesu czy uczęszczać na zajęcia w szkole. Choć w dzisiejszych czasach największą popularnością cieszą się zegarki cyfrowe to nie należy zapominać o zagarach analogowych, które pokazują czas przy pomocy dwóch lub trzech wskazówek na tarczy z liczbami od 1 do 12.

Na początku odczytywanie zegarka nie jest proste, dlatego warto ćwiczyć odczytywanie godzin, ale do tego jest potrzebny ktoś kto ustawi zegarek i sprawdzi odpowiedź. W tym przypadku komputer przychodzi z drobną pomocą. Opisane poniżej połączenie grafiki SVG oraz JavaScript pozwala na przygotowanie gadżetu na stronę wyświetlającego czas, ale pozwala też wygenerować zadania dla dziecka, aby nauczyć je odczytywać czas.

Implementacja

Przedstawiony dalej zegarek to początkowo zwykła grafika SVG. Oznacza to, że wygląd zegarka będzie można później bardzo łatwo zmienić i nie będzie potrzeby pisania nowego skryptu.

Gadżet na stronę

Pierwszy krokiem do stworzenia gadżet na stronę jest dokonanie pewnej zmiany w pliku SVG. Skrypt będzie można dopiero napisać wtedy, gdy wskazówki dostaną swoje identyfikatory tj. id. W tej implementacji wskazówka minutowa ma identyfikator wskminuta, a godzinowa wskgodzina. Zawartość tak przygotowanego pliku można dodać bezpośrednio do dokumentu HTML.

Kolejny etap polega teraz na dopisaniu odpowiedniego skryptu. Na początek warto napisać funkcję setTime(), która przyjmie dwa argumenty: hour i minute. Na podstawie argumentów zostaną wyliczone konkretne wartości obrócenia obiektu. Obracanie obiektu będzie się odbywać poprzez ustalenie wartości transform na rotate(..).

1. function setTime(hour, minute) {
2.  var rhour = hour * 30;
3.  var rminute = minute * 6;
4.  document.getElementById("wskgodzina").setAttribute("transform", "rotate(" + rhour + ", 300, 752.362)");
5.  document.getElementById("wskminuta").setAttribute("transform", "rotate(" + rminute + ", 300, 752.362)");
6. }

Oblicz w stopniach obrót wskazówki (2.) godzinowej i (3.) minutowej. (Oczywiście wartości 30 i 6 biorą się kolejno z podzielenia 360 na 12 i 60.) Następnie obliczone wartości są ustalane jako część wartości atrybutu transform do elementów (4.) wskgodzina oraz (5.) wskminuta. Przy ustalaniu obrotu rotate() podawane są trzy wartości: obrót (w stopniach) oraz punkt względem, którego obracana jest wskazówka. Punkt ten może się różnić w zależności narysowanego zegara, dlatego jeśli wskazówka zacznie uciekać należy poprawić w tych dwóch miejscach.

Teraz można przejść do napisania funkcji setActualTime(), która raz na minutę odświeży zegarek i ustawi aktualną godzinę.

1. function setActualTime(){
2.  var d = new Date();
3.  setTime(d.getHours(), d.getMinutes());
4.  setTimeout(function(){ setActualTime(); }, (60 - d.getSeconds()) * 1000);
5. }
6. setActualTime();

(2.) Poberz aktualną datę i godzinę. (3.) Ustaw czas. (4.) Odśwież dopiero jako będzie taka potrzeba. (6.) Rozpoczęcie nieskończonej pętli odświeżania oraz wstępna aktualizacja godziny na zegarku. Oba napisane skrypty wystarczy

Do pobrania na stronę

W pliku do pobrania został umieszczony przykładowy zegar razem z skryptem. Tak przygotowany zestaw wystarczy wkleić do szablonu, albo na dowolną stronę.

• Gotowy przykład