Commentaire: Le code de réveil implémenté sous HTML5, amis qui l'aiment peuvent se référer.
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<style type = "text / css">
toile {position: absolu; en haut: 0px; gauche: 0px;}
</ style>
<Title> Corloge </Title>
</ head>
<body>
<lebvas> </ canvas>
<lebvas> </ canvas>
<script type = "text / javascript">
// Obtenez l'objet de dessin
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 Hight = 200, largeur = 200;
// dessine un grand cercle
context.beginPath ();
context.strokestyle = "# 009999";
context.arc (largeur / 2, hauteur / 2, largeur / 2-1,0, math.pi * 2, true);
context.stroke ();
context.closepath ();
// dessine le point central
context.beginPath ();
context.fillStyle = "# 000";
context.arc (largeur / 2, hauteur / 2,3,0, math.pi * 2, true);
context.fill ();
context.closepath ();
// dessiner à petite échelle
var angle = 0, rayon = largeur / 2 - 4;
pour (var i = 0; i <60; i ++) {
context.beginPath ();
context.strokestyle = "# 000";
// confirme le point de départ de l'échelle
var x = largeur / 2 + rayon * math.cos (angle), y = hauteur / 2 + rayon * math.sin (angle);
context.moveto (x, y);
// Ceci est utilisé pour pointer un autre point de l'échelle au point central et donner l'angle correct
// pi est à 180 degrés, l'angle correct est un angle + 180 degrés, juste la direction opposée
var temp_angle = math.pi + angle;
context.lineto (x + 3 * math.cos (temp_angle), y + 3 * math.sin (temp_angle));
context.stroke ();
context.closepath ();
angle + = 6/180 * math.pi;
}
// grande échelle
angle = 0, rayon = largeur / 2 - 4;
context.textBaseline = 'middle';
context.TextAlign = 'Center';
context.linewidth = 2;
pour (var i = 0; i <12; i ++) {
var num = i + 3> 12? i + 3-12: i + 3;
context.beginPath ();
context.strokestyle = "# ffd700";
var x = largeur / 2 + rayon * math.cos (angle), y = hauteur / 2 + rayon * math.sin (angle);
context.moveto (x, y);
var temp_angle = math.pi + angle;
context.lineto (x + 8 * math.cos (temp_angle), y + 8 * math.sin (temp_angle));
context.stroke ();
context.closepath ();
// texte à grande échelle
context.fillText (num, x + 16 * math.cos (temp_angle), y + 16 * math.sin (temp_angle));
angle + = 30/180 * math.pi;
}
Fonction Pointer () {
var p_type = [['# 000', 70,1], ['# ccc', 60,2], ['rouge', 50,3]];
fonction drwepointer (type, angle) {
type = p_type [type];
angle = angle * math.pi * 2 - 90/180 * math.pi;
var longueur = type [1];
p_context.beginpath ();
p_context.linewidth = type [2];
p_context.strokestyle = type [0];
p_context.moveto (largeur / 2, hauteur / 2);
p_context.lineto (largeur / 2 + longueur * math.cos (angle), hauteur / 2 + longueur * math.sin (angle));
p_context.stroke ();
p_context.closePath ();
}
setInterval (function () {
p_context.clearrect (0,0, hauteur, largeur);
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 = nouveau pointeur ();
</cript>
</docy>
</html>