html5的时钟

2015/08/23 40999

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="900" height="900" style="background:#ff9900"></canvas>
        <script>
            var canvas=document.getElementById('canvas');
            var cxt=canvas.getContext('2d');
        function shizhong() {
            cxt.clearRect(0,0,900,900)
            var now=new Date();
            var sec=now.getSeconds();
            var min=now.getMinutes();
            var hour=now.getHours();
            hour=hour+min/60;
            hour=hour>12?hour-12:hour;
                cxt.beginPath();
                cxt.lineWidth=20;
                cxt.strokeStyle="blue";
                cxt.arc(300,400,300,0,360,false);
                cxt.stroke();
                cxt.closePath();
                    for(var i=0;i<12;i++){
                        cxt.save();
                        cxt.lineWidth="10";
                        cxt.strokeStyle="black";
                        cxt.translate(300,400);
                        cxt.rotate(i*30*Math.PI/180);
                        cxt.beginPath();
                        cxt.moveTo(0,-220);
                        cxt.lineTo(0,-290);
                        cxt.stroke();
                        cxt.closePath();
                        cxt.restore();
                    }
                for(var i=0;i<60;i++){
                    cxt.save();
                    cxt.lineWidth=5;
                    cxt.strokeStyle="black";
                    cxt.translate(300,400);
                    cxt.rotate(i*6*Math.PI/180);
                    cxt.beginPath();
                    cxt.moveTo(0,-270);
                    cxt.lineTo(0,-290);
                    cxt.closePath();
                    cxt.stroke();
                    cxt.restore();
                 
                }
                cxt.save();
                cxt.translate(300,400);
                cxt.lineWidth=8;
                cxt.strokeStyle="#000";
                cxt.beginPath();
                cxt.rotate(hour*30*Math.PI/180);
                cxt.moveTo(0,-150);
                cxt.lineTo(0,10);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();
                cxt.save();
                cxt.lineWidth=5;
                cxt.strokeStyle="#000";
                cxt.translate(300,400);
                cxt.rotate(min*6*Math.PI/180);
                cxt.beginPath();
                cxt.moveTo(0,-180);
                cxt.lineTo(0,10);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();
                cxt.save();
                cxt.lineWidth=2;
                cxt.strokeStyle="red";
                cxt.translate(300,400);
                cxt.rotate(sec*6*Math.PI/180);
                cxt.beginPath();
                cxt.moveTo(0,-240);
                cxt.lineTo(0,10);
                cxt.stroke();
                cxt.closePath();
                cxt.restore();
        }
                setInterval(shizhong,1000);
        </script>
    </body>
</html>