主要使用了VML标记，支持IE5.5以上版本
具体实现代码：
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<title>vml_clock</title>
<STYLE>
v/:*{behavior:url(#default#VML);}
o/:* { behavior: url(#default#VML) }
</STYLE>
<script>
var hh=0,mm=0,tt="";//Added
var cx=100, cy=115, banj=90, dkd=16, xkd=4;hkd=10//dkd时刻度长度、xkd分刻度长度
var seclen=0.8, minlen=0.6, hourlen=0.5;
j=0;
a=0;
var sh;
function init()
{
div1.appendChild(document.createElement("<v:oval style='position:absolute;left:"+(cx-banj)+";top:"+(cy-banj)+";"+(2.0*banj)+";height:"+(2.0*banj)+";' strokecolor='green' strokeweight='2' fillcolor='white'/>"));
//a++;
var dt=new Date();
var h0=dt.getHours() ;
var mark=1;
if(h0<12)
{
document.getElementById('noonselect').value = 'AM';
mark=1;
}
else
{
document.getElementById('noonselect').value = 'PM';
mark=2;
}
for(var i=0;i<24;i++)
{
if(i%2==0)
{
var ang=Math.PI/6.0;var px=banj*Math.cos(i/2*ang);var py=banj*Math.sin(i/2*ang);var sca=1.0-dkd/banj;
div1.appendChild(document.createElement("<v:line style='position:absolute;left:0;top:0;' from='"+(cx+px*sca)+","+(cy+py*sca)+"' to='"+(cx+px)+","+(cy+py)+"' strokecolor='black' strokeweight='2' onclick='javascript:hh="+(i/2+3)%12+";mm=0;if(document.getElementById(/"noonselect/").value == /"PM/"){hh+=12;}'/>")); // onclick method is Added
var t=document.createElement("div");
var p={//根据你的时钟大小调整坐标数值
x:Array(93,158,98,33),
y:Array(40,105,173,105)
}
if(i%6==0)
{
// alert("left="+p.x[j]+":top="+p.y[j]); //j在最前面初始化为0
t.style.cssText="position:absolute;left:"+p.x[j]+"px;top:"+p.y[j]+"px; font-size:10pt;color:#F00;line-height:18px;z-index:"+(j+1)*10;
if(h0<12)
{
t.innerText=(i%24==0)?"12":(i/2)%12;
}
else
{
t.innerText=(i%24==0)?"24":(i/2)%12+12;
}
div1.appendChild(t);
j++;
}
}
else
{
var ang=Math.PI/12.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-hkd/banj;
div1.appendChild(document.createElement("<v:line style='position:absolute;left:0;top:0;' from='"+(cx+px*sca)+","+(cy+py*sca)+"' to='"+(cx+px)+","+(cy+py)+"' strokecolor='blue' strokeweight='1.5' onclick='javascript:hh="+((i-1)/2+3)%12+";mm=30;if(document.getElementById(/"noonselect/").value == /"PM/"){hh+=12;}'/>")); // onclick method is Added
}
}
for(var i=0;i<60;i++)
{
var ang=Math.PI/30.0;var px=banj*Math.cos(i*ang);var py=banj*Math.sin(i*ang);var sca=1.0-xkd/banj;
var sh = parseInt((i+15)/5);
if(mark==1 &&(sh==12))
sh -=12;
div1.appendChild(document.createElement("<v:line style='position:absolute;left:0;top:0;' from='"+(cx+px*sca)+","+(cy+py*sca)+"' to='"+(cx+px)+","+(cy+py)+"' strokecolor='black' strokeweight='1' onclick='javascript:hh="+sh+";mm="+(i+15)%5*12+"'/>")); // onclick method is Added
}
div1.appendChild(document.createElement("<v:line id='hpoint' style='position:absolute;left:0;top:0;' from='"+cx+","+cy+"' to='"+cx+","+(cy-banj*hourlen)+"' strokecolor='blue' strokeweight='3'/>"));
div1.all.hpoint.innerHTML="<v:stroke EndArrow='Classic' />";
div1.appendChild(document.createElement("<v:line id='mpoint' style='position:absolute;left:0;top:0;' from='"+cx+","+cy+"' to='"+cx+","+(cy-banj*minlen)+"' strokecolor='blue' strokeweight='2'/>"));
div1.all.mpoint.innerHTML="<v:stroke EndArrow='Classic' />";
div1.appendChild(document.createElement("<v:line id='spoint' style='position:absolute;left:0;top:0;' from='"+cx+","+cy+"' to='"+cx+","+(cy-banj*seclen)+"' strokecolor='red' strokeweight='1'/>"));
div1.all.spoint.innerHTML="<v:stroke EndArrow='Classic' />";
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
hh=h;
mm=m;
showtime();
sh =setInterval("showtime();",1000);
}
function init2()
{
if(document.getElementById('noonselect').value == 'AM')
{
div1.childNodes[2].innerText="12";
div1.childNodes[9].innerText="3";
div1.childNodes[16].innerText="6";
div1.childNodes[23].innerText="9";;
}
else
{
div1.childNodes[2].innerText="24";
div1.childNodes[9].innerText="15";
div1.childNodes[16].innerText="18";
div1.childNodes[23].innerText="21";
}
div1.all.hpoint.style.display="none";
div1.all.mpoint.style.display="none";
div1.all.spoint.style.display="none";
hh=0;mm=0;
}
function init1()
{
if(document.getElementById('noonselect').value == 'AM')
{
div1.childNodes[2].innerText="12";
div1.childNodes[9].innerText="3";
div1.childNodes[16].innerText="6";
div1.childNodes[23].innerText="9";;
}
else
{
div1.childNodes[2].innerText="24";
div1.childNodes[9].innerText="15";
div1.childNodes[16].innerText="18";
div1.childNodes[23].innerText="21";
}
div1.all.hpoint.style.display="";
div1.all.mpoint.style.display="";
div1.all.spoint.style.display="";
var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
hh=h;
mm=m;
}
function showtime()
{
var dt=new Date();
var h=dt.getHours() % 12;
var m=dt.getMinutes();
var s=dt.getSeconds();
var tot=h+m/60.0+s/3600.0;
var ang=-Math.PI/2.0+2.0*Math.PI*tot/12.0;
div1.all.hpoint.to=(cx+banj*hourlen*Math.cos(ang))+","+(cy+banj*hourlen*Math.sin(ang));
tot=m+s/60.0;
ang=-Math.PI/2.0+2.0*Math.PI*tot/60.0;
div1.all.mpoint.to=(cx+banj*minlen*Math.cos(ang))+","+(cy+banj*minlen*Math.sin(ang));
ang=-Math.PI/2.0+2.0*Math.PI*s/60.0;
div1.all.spoint.to=(cx+banj*seclen*Math.cos(ang))+","+(cy+banj*seclen*Math.sin(ang));
//Added
if(document.getElementById('noonselect').value == 'AM'&&hh>=12)
{
hh -=12;
}
else if(document.getElementById('noonselect').value == 'PM'&&hh<12)
{
hh +=12;
}
tt=((hh<10)?"0":"")+hh+":"+((mm<10)?"0":"")+mm;
sTime.value=tt;
}
function showlabel()
{
var dt=new Date();
var h=dt.getHours() ;
if((h<=12&&document.getElementById('noonselect').value == 'AM')||(h>12&&document.getElementById('noonselect').value == 'PM'))
{
init1();
}
else
{
init2();
}
}
function add()
{
mm++;
}
function low()
{
mm--;
}
</script>
</head>
<body style='margin:1;cursor:default' vlink=#3732CD link='#3732CD' onload="init();">
<br>
<span style='250;height:250;background-color:white;border:1 solid gray;color:black;overflow:hidden'>
<p ><input type="text" id="sTime" style="width=40" readonly /><!--Added -->
<input type="button" value="+" onclick="add();">
<input type="button" value="-" onclick="low();">
<select id="noonselect" onchange="showlabel();"><option value="AM">A.M.</option><option value="PM">P.M.</option></select></p>
<div style='250;height:250;background-color:white;border:0 solid gray;color:black;overflow:hidden' id="div1">
</div>
</span>
</body>
</html>