Kommentar: Der unter HTML5 implementierte Weckercode, Freunde, die es mögen, können sich darauf verweisen.
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8">
<style type = "text/css">
Canvas {Position: absolut; ober: 0px; links: 0px;}
</style>
<title> Uhr </title>
</head>
<body>
<Canvas> </canvas>
<Canvas> </canvas>
<script type = "text/javaScript">
// Erhalten Sie das Zeichenobjekt
var canvas = document.getElementById ('canvas');
var context = canvas.getContext ('2d');
var p_canvas = document.getElementById ('p_canvas');
var p_context = p_canvas.getContext ('2d');
var Höhe = 200, Breite = 200;
// einen großen Kreis zeichne
context.beginPath ();
context.strokestyle = "#009999";
context.arc (Breite/2, Höhe/2, Breite/2-1,0, math.pi*2, true);
context.stroke ();
context.closepath ();
// den Mittelpunkt zeichne
context.beginPath ();
context.fillStyle = "#000";
context.arc (Breite/2, Höhe/2,3,0, Math.pi*2, true);
context.fill ();
context.closepath ();
// Kleinwaage zeichnen
var Winkel = 0, Radius = Breite/2 - 4;
für (var i = 0; i <60; i ++) {
context.beginPath ();
context.strokestyle = "#000";
// Bestätigen Sie den Ausgangspunkt der Skala
var x = width/2 + radius*math.cos (Winkel), y = Höhe/2 + Radius*Math.sin (Winkel);
context.moveto (x, y);
// Dies wird verwendet, um einen weiteren Punkt der Skala auf den Mittelpunkt zu weisen und den richtigen Winkel zu geben
// pi ist 180 Grad, der richtige Winkel ist Winkel+180 Grad, genau die entgegengesetzte Richtung
var temp_angle = math.pi +Winkel;
context.lineto (x +3*math.cos (temp_angle), y +3*math.sin (temp_angle));
context.stroke ();
context.closepath ();
Winkel+= 6/180*math.pi;
}
// großes Maßstab
Winkel = 0, Radius = Breite/2 - 4;
context.textbaseline = 'Middle';
context.textalign = 'center';
context.linewidth = 2;
für (var i = 0; i <12; i ++) {
var num = i+3> 12? i+3-12: i+3;
context.beginPath ();
context.strokestyle = "#ffd700";
var x = width/2 + radius*math.cos (Winkel), y = Höhe/2 + Radius*Math.sin (Winkel);
context.moveto (x, y);
var temp_angle = math.pi +Winkel;
context.lineto (x +8*math.cos (temp_angle), y +8*math.sin (temp_angle));
context.stroke ();
context.closepath ();
// großem Maßstab Text
context.FillText (num, x+16*math.cos (temp_angle), y+16*math.sin (temp_angle));
Winkel+= 30/180*Math.pi;
}
Funktion pointer () {
var p_type = [['#000', 70,1], ['#ccc', 60,2], ['Red', 50,3]];
Funktion drwepointer (Typ, Winkel) {
type = p_type [type];
Angle = Winkel*math.pi*2 - 90/180*Math.pi;
var länge = Typ [1];
p_context.beginPath ();
p_context.linewidth = type [2];
p_context.strokestyle = Typ [0];
p_context.moveto (Breite/2, Höhe/2);
p_context.lineto (Breite/2 + Länge*math.cos (Winkel), Höhe/2 + Länge*Math.sin (Winkel));
p_context.stroke ();
p_context.closepath ();
}
setInterval (function () {
p_context.clearrect (0,0, Höhe, Breite);
var time = new Date ();
var h = time.gethours ();
var m = time.getminutes ();
var s = time.getSeconds ();
H = H> 12? H-12: H;
H = H+m/60;
H = H/12;
M = m/60;
S = S/60;
drwepointer (0, s);
drwepointer (1, m);
drwepointer (2, h);
}, 500);
}
var p = neuer Pointer ();
</script>
</body>
</html>