Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] zegar analogowy - zgodność z IE i 'pływający sekundnik'
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
KCG
1. Znalazłem skrypt zegara i dostosowałem do swoich potrzeb, jednak nie działa on pod IE7. Np. na onecie działa tongue.gif
2. Jak zmodyfikować skrypt, żeby wskazówka od sekund "pływała"?

  1. function init() {
  2. clock();
  3. setInterval('clock()',1000);
  4. }
  5.  
  6. function clock() {
  7. var now = new Date();
  8. var canvas = document.getElementById('page_clock');
  9.  
  10. if (canvas.getContext) {
  11. var ctx = canvas.getContext('2d');
  12. ctx.save();
  13. ctx.clearRect(0,0,200,200);
  14. ctx.translate(100,100);
  15.  
  16. //kolor, grubość, styl zakończenia, styl łączenia, przezroczystość
  17. ctx.strokeStyle = "#ffffff";
  18. ctx.lineWidth = 8;
  19. ctx.lineCap = "round";
  20. ctx.lineJoin = "round";
  21. ctx.globalAlpha = 0.65;
  22.  
  23. var sec = now.getSeconds();
  24. var min = now.getMinutes();
  25. var hr = now.getHours();
  26. hr = hr >= 12 ? hr-12 : hr;
  27.  
  28. ctx.rotate(-Math.PI/2);
  29.  
  30. //godzina
  31. ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec );
  32. ctx.beginPath();
  33. ctx.moveTo(0,0);
  34. ctx.lineTo(50,0);
  35. ctx.stroke();
  36.  
  37. //minuta
  38. ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec );
  39. ctx.beginPath();
  40. ctx.moveTo(0,0);
  41. ctx.lineTo(70,0);
  42. ctx.stroke();
  43.  
  44. //sekunda
  45. ctx.rotate(sec * Math.PI/30);
  46. ctx.strokeStyle = "#ff0000";
  47. ctx.lineWidth = 5;
  48. ctx.beginPath();
  49. ctx.moveTo(0,0);
  50. ctx.lineTo(70,0);
  51. ctx.stroke();
  52.  
  53. ctx.restore();
  54. }
  55. }
  56. window.onload = init;


pzdr

Jeszcze mi się nasunęło 3. Jak przejść walidację? smile.gif
kamil4u
IE nie obsługuje canvas sad.gif , a jedyne co możesz zrobić to użyć VML. Ogólnie przeczytaj ten post: http://forum.webhelp.pl/viewtopic.php?p=857781#857781 ,który powinien rozjaśnić Ci wątpliwości smile.gif


Co do:
Cytat
Jak przejść walidację? smile.gif
to o co chodzi?
KCG
Chodzi o walidację standardów W3, ale to w sumie najmniej istotne.
Dzięki obczaję sobie ten link, choć jeszcze nie zawsze dobrze mi śmiga ten zegar smile.gif
erix
Cytat
Chodzi o walidację standardów W3, ale to w sumie najmniej istotne.

Przecież walidator nie sprawdza składni JS. tongue.gif

A jeśli chodzi o pływającą wskazówkę - skrypt wymagałby przerobienia na dzielenie wg milisekund i odpowiednim zmniejszeniu wartości w
  1. <?php
  2. setInterval('clock()',1000);
  3. ?>
KCG
Co do walidacji to chodzi o element <canvas>... którego w XHTML'u "nie ma".
Poradziłem sobie, tak jak mówisz w oparciu o milisekundy, z tym, że zrobiłem sobie z dokładnością do 0,01s smile.gif
erix
Cytat
Co do walidacji to chodzi o element <canvas>... którego w XHTML'u "nie ma".

Po tym elemencie rysuje się za pomocą JS, to wstawiaj go za pomocą JS. winksmiley.jpg

Jest document.createElement, appendChild, poradzisz sobie. winksmiley.jpg
KCG
Też sposób, dzięki.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.