تعليق: رمز المنبه الذي تم تنفيذه ضمن HTML5 ، يمكن للأصدقاء الذين يحبونه الرجوع إليه.
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<type type = "text/css">
Canvas {الموضع: Absolute ؛ Top: 0px ؛ Left: 0px ؛}
</style>
<title> الساعة </title>
</head>
<body>
<Canvas> </tanvas>
<Canvas> </tanvas>
<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 HISTE = 200 ، العرض = 200 ؛
// ارسم دائرة كبيرة
context.beginPath () ؛
context.strokestyle = "#009999" ؛
context.arc (العرض/2 ، الارتفاع/2 ، العرض/2-1،0 ، Math.Pi*2 ، true) ؛
سياق. ضربة () ؛
context.closepath () ؛
// ارسم النقطة الوسط
context.beginPath () ؛
conext.fillStyle = "#000" ؛
context.arc (العرض/2 ، الارتفاع/2،3،0 ، Math.pi*2 ، true) ؛
context.fill () ؛
context.closepath () ؛
// ارسم نطاق صغير
var angle = 0 ، نصف القطر = العرض/2 - 4 ؛
لـ (var i = 0 ؛ i <60 ؛ i ++) {
context.beginPath () ؛
context.strokestyle = "#000" ؛
// تأكيد نقطة انطلاق المقياس
var x = width/2 + radius*math.cos (angle) ، y = height/2 + radius*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.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 = width/2 + radius*math.cos (angle) ، y = height/2 + radius*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.closepath () ؛
// نص واسع النطاق
context.filltext (num ، x+16*math.cos (temp_angle) ، y+16*math.sin (temp_angle)) ؛
زاوية+= 30/180*Math.pi ؛
}
وظيفة مؤشر () {
var p_type = [['#000' ، 70،1] ، ['#ccc' ، 60،2] ، ['Red' ، 50،3]] ؛
وظيفة drwepointer (النوع ، زاوية) {
اكتب = p_type [type] ؛
angle = angle*math.pi*2 - 90/180*Math.pi ؛
var length = type [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 (زاوية) ، ارتفاع/2 + طول*Math.Sin (angle)) ؛
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 ؛
م = م/60 ؛
s = s/60 ؛
drwepointer (0 ، s) ؛
DRWEPOINTER (1 ، M) ؛
drwepointer (2 ، ح) ؛
} ، 500) ؛
}
var p = New Pointer () ؛
</script>
</body>
</html>