[js] zegar analogowy - zgodność z IE i 'pływający sekundnik' Opcje

[KCG]

1. Znalazłem skrypt zegara i dostosowałem do swoich potrzeb, jednak nie działa on pod IE7. Np. na onecie działa (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)
2. Jak zmodyfikować skrypt, żeby wskazówka od sekund "pływała"?

[HTML] pobierz, plaintext 
function init() {
    clock();
    setInterval('clock()',1000);
}
 
function clock() {
    var now = new Date();
    var canvas = document.getElementById('page_clock');
 
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.save();
        ctx.clearRect(0,0,200,200);
        ctx.translate(100,100);
 
        //kolor, grubość, styl zakończenia, styl łączenia, przezroczystość
        ctx.strokeStyle = "#ffffff";
        ctx.lineWidth = 8;
        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        ctx.globalAlpha = 0.65;
 
        var sec = now.getSeconds();
        var min = now.getMinutes();
        var hr  = now.getHours();
        hr = hr >= 12 ? hr-12 : hr;
 
        ctx.rotate(-Math.PI/2);
 
        //godzina
        ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec );
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(50,0);
        ctx.stroke();
 
        //minuta
        ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec );
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(70,0);
        ctx.stroke();
 
        //sekunda
        ctx.rotate(sec * Math.PI/30);
        ctx.strokeStyle = "#ff0000";
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(70,0);
        ctx.stroke();
 
        ctx.restore();
    }
}
window.onload = init;
[HTML] pobierz, plaintext 

pzdr

Jeszcze mi się nasunęło 3. Jak przejść walidację? (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[kamil4u]

IE nie obsługuje canvas (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)


Co do:

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[erix]

Chodzi o walidację standardów W3, ale to w sumie najmniej istotne.

Przecież walidator nie sprawdza składni JS. (IMG:http://forum.php.pl/style_emoticons/default/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

[PHP] pobierz, plaintext 
<?php
setInterval('clock()',1000);
?>
[PHP] pobierz, plaintext 

[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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[erix]

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. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Jest document.createElement, appendChild, poradzisz sobie. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

[KCG]

Też sposób, dzięki.