Comentario: El código de despertador implementado en HTML5, amigos que les gusta pueden referirse a él.
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<style type = "text/css">
lienzo {posición: absoluto; top: 0px; izquierda: 0px;}
</style>
<title> reloj </title>
</ablo>
<Body>
<Canvas> </Canvas>
<Canvas> </Canvas>
<script type = "text/javaScript">
// Obtener el objeto de dibujo
var lienvas = document.getElementById ('Canvas');
var context = Canvas.getContext ('2d');
var p_canvas = document.getElementById ('p_canvas');
var p_context = p_canvas.getContext ('2d');
altura var = 200, ancho = 200;
// dibujar un gran círculo
context.beginPath ();
context.strokestyle = "#0099999";
context.arc (ancho/2, altura/2, ancho/2-1,0, math.pi*2, verdadero);
context.stroke ();
context.ClosePath ();
// Dibuja el punto medio
context.beginPath ();
context.fillstyle = "#000";
context.arc (ancho/2, altura/2,3,0, math.pi*2, verdadero);
context.fill ();
context.ClosePath ();
// dibujar a pequeña escala
ángulo var = 0, radio = ancho/2 - 4;
para (var i = 0; i <60; i ++) {
context.beginPath ();
context.strokestyle = "#000";
// Confirma el punto de partida de la escala
var x = ancho/2 + radio*math.cos (ángulo), y = altura/2 + radio*Math.sin (ángulo);
context.moveto (x, y);
// Esto se usa para apuntar otro punto de la escala al punto central y dar el ángulo correcto
// pi es 180 grados, el ángulo correcto es el ángulo+180 grados, solo la dirección opuesta
var temp_angle = Math.pi +ángulo;
context.lineto (x +3*math.cos (temp_angle), y +3*math.sin (temp_angle));
context.stroke ();
context.ClosePath ();
ángulo+= 6/180*Math.pi;
}
// a gran escala
ángulo = 0, radio = ancho/2 - 4;
context.TextBaseline = 'Middle';
context.textalign = 'Center';
context.linewidth = 2;
para (var i = 0; i <12; i ++) {
var num = i+3> 12? i+3-12: i+3;
context.beginPath ();
context.strokestyle = "#ffd700";
var x = ancho/2 + radio*math.cos (ángulo), y = altura/2 + radio*Math.sin (ángulo);
context.moveto (x, y);
var temp_angle = Math.pi +ángulo;
context.lineto (x +8*math.cos (temp_angle), y +8*math.sin (temp_angle));
context.stroke ();
context.ClosePath ();
// texto a gran escala
context.fillText (num, x+16*math.cos (temp_angle), y+16*math.sin (temp_angle));
ángulo+= 30/180*Math.pi;
}
function pointer () {
var p_type = [['#000', 70,1], ['#ccc', 60,2], ['rojo', 50,3]];
function drwepointer (type, ángulo) {
type = p_type [type];
ángulo = ángulo*Math.pi*2 - 90/180*Math.pi;
longitud var = type [1];
p_context.beginpath ();
p_context.lineWidth = type [2];
p_context.strokestyle = type [0];
p_context.moveto (ancho/2, altura/2);
p_context.lineto (ancho/2 + longitud*math.cos (ángulo), altura/2 + longitud*math.sin (ángulo));
p_context.stroke ();
p_context.closePath ();
}
setInterval (function () {
P_Context.ClearRect (0,0, altura, ancho);
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 = nuevo puntero ();
</script>
</body>
</html>