コメント：HTML5の下で実装された目覚まし時計コード、それが好きな友人はそれを参照できます。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<style type = "text/css">
canvas {position：absolute; top：0px;左：0px;}
</style>
<title> clock </title>
</head>
<body>
<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（width/2、height/2、width/2-1,0、math.pi*2、true）;
context.stroke（）;
Context.ClosePath（）;
//中間点を描きます
context.beginpath（）;
context.fillstyle = "＃000";
context.arc（width/2、height/2,3,0、math.pi*2、true）;
context.fill（）;
Context.ClosePath（）;
//小規模を描きます
var angle = 0、radius = width/2-4;
for（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.stroke（）;
Context.ClosePath（）;
Angle+= 6/180*math.pi;
}
//大規模
角度= 0、radius = width/2-4;
Context.TextBaseLine = 'Middle';
context.textalign = 'center';
Context.LineWidth = 2;
for（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.stroke（）;
Context.ClosePath（）;
//大規模なテキスト
context.filltext（num、x+16*math.cos（temp_angle）、y+16*math.sin（temp_angle））;
角度+= 30/180*math.pi;
}
関数pointer（）{
var p_type = [['＃000'、70,1]、['＃ccc'、60,2]、['red'、50,3]];
関数drwepointer（タイプ、角度）{
type = 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（width/2、height/2）;
p_context.lineto（width/2 + length*math.cos（angle）、height/2 + length*math.sin（angle））;
p_context.stroke（）;
p_context.closepath（）;
}
setInterval（function（）{
p_context.clearrect（0,0、height、width）;
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>