Zegar elektroniczny napisany w JavaScript

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 4499 razy

Prosty skrypt wyświetlający bieżącą godzinę za pomocą zegara elektronicznego, który (przyznaję się bez bicia) narysowałem w Inkscap-ie.

Działanie skryptu sprowadza się do odpowiedniego ustawienia właściwości elementów SVG o określonym przypisanym mu identyfikatorze. Zastosowanie grafiki wektorowej do wyświetlania zegara ma tę, że można go skalować do woli bez straty jakości jak ma to miejsce w przypadku.

Kod skryptu:

settings = Array( Array(1,1,1,0,1,1,1), // 0 Array(0,0,1,0,0,1,0), // 1 Array(1,0,1,1,0,0,1), // 2 Array(1,0,1,1,0,1,1), // 3 Array(0,1,1,1,0,1,0), // 4 Array(1,1,0,1,0,1,1), // 5 Array(1,1,0,1,1,1,1), // 6 Array(1,0,1,0,0,1,0), // 7 Array(1,1,1,1,1,1,1), // 8 Array(1,1,1,1,0,1,1) // 9 ); function setNumber(number, id){ number = number % 10; var nId; for(i = 0; i < settings[number].length; i++){ nId = id + (i + 1); if(settings[number][i] == 1){ $("#" + nId).css("fill", "#ff0000"); }else{ $("#" + nId).css("fill", "#660000"); } } } function setTimer(){ var d = new Date(); setNumber(d.getSeconds() % 10, "sec_1_"); setNumber(parseInt(d.getSeconds() / 10), "sec_2_"); setNumber(d.getMinutes() % 10, "min_1_"); setNumber(parseInt(d.getMinutes() / 10), "min_2_"); setNumber(d.getHours() % 10, "hours_1_"); setNumber(parseInt(d.getHours() / 10), "hours_2_"); } window.onload = function(){ setTimer(); setInterval(setTimer, 1000); }
Propozycje książek