Zegar elektroniczny napisany w JavaScript

Stronę tą wyświetlono już: 150 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:

Listing 1
  1. var settings = Array(
  2. Array(1,1,1,0,1,1,1), // 0
  3. Array(0,0,1,0,0,1,0), // 1
  4. Array(1,0,1,1,1,0,1), // 2
  5. Array(1,0,1,1,0,1,1), // 3
  6. Array(0,1,1,1,0,1,0), // 4
  7. Array(1,1,0,1,0,1,1), // 5
  8. Array(1,1,0,1,1,1,1), // 6
  9. Array(1,0,1,0,0,1,0), // 7
  10. Array(1,1,1,1,1,1,1), // 8
  11. Array(1,1,1,1,0,1,1) // 9
  12. );
  13. function setNumber(number, id){
  14. number = number % 10;
  15. var nId;
  16. for(i = 0; i < settings[number].length; i++){
  17. nId = id + (i + 1);
  18. if(settings[number][i] == 1){
  19. $("#" + nId).css("fill", "#ff0000");
  20. }else{
  21. $("#" + nId).css("fill", "#660000");
  22. }
  23. }
  24. }
  25. function setTimer(){
  26. var d = new Date();
  27. setNumber(d.getSeconds() % 10, "sec_1_");
  28. setNumber(parseInt(d.getSeconds() / 10), "sec_2_");
  29. setNumber(d.getMinutes() % 10, "min_1_");
  30. setNumber(parseInt(d.getMinutes() / 10), "min_2_");
  31. setNumber(d.getHours() % 10, "hours_1_");
  32. setNumber(parseInt(d.getHours() / 10), "hours_2_");
  33. }
  34. window.onload = function(){
  35. setTimer();
  36. setInterval(setTimer, 1000);
  37. }

Komentarze