Комментарий: Код будильника, реализованный под HTML5, друзья, которым это нравится.
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<стиль типа = "text/css">
Canvas {position: Absolute; Top: 0px; слева: 0px;}
</style>
<title> часы </title>
</head>
<тело>
<Canvas> </canvas>
<Canvas> </canvas>
<script type = "text/javascript">
// Получить объект рисования
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 height = 200, ширина = 200;
// нарисовать большой круг
context.beginpath ();
context.strokestyle = "#009999";
context.arc (ширина/2, высота/2, ширина/2-1,0, математика. Pi*2, true);
Context.Stroke ();
context.closepath ();
// нарисовать среднюю точку
context.beginpath ();
context.fillstyle = "#000";
context.arc (ширина/2, высота/2,3,0, математика. Pi*2, true);
context.fill ();
context.closepath ();
// рисовать мелкие масштаба
var agne = 0, radius = ширина/2 - 4;
для (var i = 0; i <60; i ++) {
context.beginpath ();
context.strokestyle = "#000";
// подтвердить начальную точку шкалы
var x = ширина/2 + радиус*math.cos (angle), y = высота/2 + радиус*math.sin (angle);
context.moveto (x, y);
// это используется для указания другой точки масштаба к центральной точке и придать правильный угол
// PI составляет 180 градусов, правильный угол - угол+180 градусов, прямо в противоположном направлении
var temp_angle = math.pi +angle;
context.lineto (x +3*math.cos (temp_angle), y +3*math.sin (temp_angle));
Context.Stroke ();
context.closepath ();
угол+= 6/180*Math.pi;
}
// крупномасштабные
угол = 0, радиус = ширина/2 - 4;
Context.TextBaseline = 'Middle';
context.textalign = 'center';
context.linewidth = 2;
для (var i = 0; i <12; i ++) {
var num = i+3> 12? i+3-12: i+3;
context.beginpath ();
context.strokestyle = "#ffd700";
var x = ширина/2 + радиус*math.cos (angle), y = высота/2 + радиус*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 ();
// крупномасштабный текст
context.filltext (num, x+16*math.cos (temp_angle), y+16*math.sin (temp_angle));
угол+= 30/180*Math.pi;
}
function pointter () {
var p_type = [['#000', 70,1], ['#ccc', 60,2], ['red', 50,3]];
Функция drwePointer (type, angle) {
type = p_type [type];
angle = angel*math.pi*2 - 90/180*Math.pi;
var длина = тип [1];
p_context.beginpath ();
p_context.linewidth = type [2];
p_context.strokestyle = type [0];
p_context.moveto (ширина/2, высота/2);
p_context.lineto (ширина/2 + длина*math.cos (angle), высота/2 + длина*math.sin (угол));
p_context.stroke ();
p_context.closepath ();
}
setInterval (function () {
p_context.clearrect (0,0, высота, ширина);
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 = new pointer ();
</script>
</body>
</html>