刚做的不用图片的时钟 - JavaScript论坛

<html xmlns:v=\"urn:schemas-microsoft-com:vml\">
<script defer>
function clock () {
var nowtime=new Date()
nowhour=nowtime.getHours()
if (nowhour>=12)
nowhour-=12
nowminute=nowtime.getMinutes()
nowsecond=nowtime.getSeconds()
nowmill=nowtime.getMilliseconds()
var harc,marc,sarc,mmarc
harc=(nowhour+nowminute/60+nowsecond/3600+nowmill/3600000)*30
marc=(nowminute+nowsecond/60+nowmill/60000)*6
sarc=(nowsecond+nowmill/1000)*6
//角度的字符串
nh=(180-harc)*Math.PI/180
harcT=Math.sin(nh)*250+500
harcL=Math.cos(nh)*250+500
harcStr=harcT+\",\"+harcL
document.all.hourline.to.value=harcStr
//分钟的字符串
nm=(180-marc)*Math.PI/180
marcT=Math.sin(nm)*350+500
marcL=Math.cos(nm)*350+500
marcStr=marcT+\",\"+marcL
document.all.minuteline.to.value=marcStr
//秒的字符串
sm=(180-sarc)*Math.PI/180
sarcT=Math.sin(sm)*400+500
sarcL=Math.cos(sm)*400+500
sarcStr=sarcT+\",\"+sarcL
document.all.secondline.to.value=sarcStr
document.all.txt.innerHTML=\"现在时间是：\"+nowtime.getHours()+\":\"+nowtime.getMinutes()+\":\"+nowtime.getSeconds()
setTimeout(\"clock()\",\"50\")
}
</script>
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<body onLoad=\"clock()\">

<v:group id=\"clock\" Coordsize=\"1000,1000\" style=\"width:200;height:200;position:relative\">
<v:Oval id=\"outercircle\" style=\"width:1000;height:1000;z-index:10;\" fillcolor=\"gray\" />
<v:oval id=\"innercircle\" style=\"position:relative;top:75;left:75;width:850;height:850;z-index:15\" fillcolor=\"white\" />
<v:line id=\"hourline\" style=\"position:relative;z-index:20\" from=\"500,500\" to=\"800,800\" strokeColor=\"gray\">
<v:stroke startarrow=\"oval\" endarrow=\"classic\" dashstyle=\"Dot\" strokeColor=\"red\" />
</v:line>
<v:line id=\"minuteline\" style=\"position:relative;z-index:20\" from=\"500,500\" to=\"500,900\" strokeColor=\"black\">
<v:stroke endarrow=\"classic\" dashstyle=\"Dot\"/>
</v:line>
<v:line id=\"secondline\" style=\"position:relative;z-index:20\" from=\"500,500\" to=\"400,900\" strokeColor=\"black\">
<v:stroke endarrow=\"classic\" dashstyle=\"Dot\"/>
</v:line>
<span style=\"position:relative;top:0;left:92;z-index:25\">12</span>
<span style=\"position:relative;top:93;left:169;z-index:25\">3</span>
<span style=\"position:relative;top:185;left:67;z-index:25\">6</span>
<span style=\"position:relative;top:93;left:-40;z-index:25\">9</span>
<v:/group>
<div id=txt style=\"position:relative;top:220;left:40;border:1px solid black;font-size:12px;width:125;padding:3px\"></div>
</body>
</html>

第 10 楼

得分:0

我没学过JavaScript，写的这些注释是根据C规则猜出来的，如果不对请指正。谢谢
<html xmlns:v="urn:schemas-microsoft-com:vml">
<script defer> //脚本开始
function clock () {　　　//创建函数，获得当前时间
var nowtime=new Date() //定义变量，用new Date()函数把值赋给nowtime
nowhour=nowtime.getHours() //与上同理
if (nowhour>=12) 　　　　//判断当前时间是否大于12,如果大于12就用下面的语句
nowhour-=12　　　　　　//当上面的条件成立的时候，把当前时间减去12,因为时钟显示没有24小时制　　　　　　　　　　　　　　　　　　　　　　　　　　　　　的，早上五点与晚上五点显示一样
nowminute=nowtime.getMinutes()　　//定义变量nowminute并用函数赋值给它，以下同理
nowsecond=nowtime.getSeconds()
nowmill=nowtime.getMilliseconds()
var harc,marc,sarc,mmarc　　　　　//定义三个变量，用来记录时针、分针和秒针的度数
harc=(nowhour+nowminute/60+nowsecond/3600+nowmill/3600000)*30
marc=(nowminute+nowsecond/60+nowmill/60000)*6
sarc=(nowsecond+nowmill/1000)*6
//角度的字符串（把上面的度数转换为弧度制）
nh=(180-harc)*Math.PI/180
harcT=Math.sin(nh)*250+500
harcL=Math.cos(nh)*250+500
harcStr=harcT+","+harcL
document.all.hourline.to.value=harcStr
//分钟的字符串
nm=(180-marc)*Math.PI/180
marcT=Math.sin(nm)*350+500
marcL=Math.cos(nm)*350+500
marcStr=marcT+","+marcL
document.all.minuteline.to.value=marcStr
//秒的字符串
sm=(180-sarc)*Math.PI/180
sarcT=Math.sin(sm)*400+500
sarcL=Math.cos(sm)*400+500
sarcStr=sarcT+","+sarcL
document.all.secondline.to.value=sarcStr
document.all.txt.innerHTML="现在时间是："+nowtime.getHours()+":"+nowtime.getMinutes()+":"+nowtime.getSeconds()　　　//以数字的方式显示时间
setTimeout("clock()","50")
}
</script>
<STYLE>　　　　　　　　　　　//这里开始是画图，但看不明白，主要是先给时针、分针和秒针以不同的图案，随时间的转换而改变角度
v\:* { Behavior: url(#default#VML) }
</STYLE>
<body onLoad="clock()"><v:group id="clock" Coordsize="1000,1000" style="width:200;height:200;position:relative">
<v:Oval id="outercircle" style="width:1000;height:1000;z-index:10;" fillcolor="gray" />　//画个大圆，在里面填充灰色
<v:oval id="innercircle" style="position:relative;top:75;left:75;width:850;height:850;z-index:15" fillcolor="white" />　　//画个小圆，里面填充白色，覆盖在大圆上，从而画出一个环
<v:line id="hourline" style="position:relative;z-index:20" from="500,500" to="800,800" strokeColor="gray">　　　　//下面开始是画虚线和箭头，作成钟的针
<v:stroke startarrow="oval" endarrow="classic" dashstyle="Dot" strokeColor="red" />
</v:line>
<v:line id="minuteline" style="position:relative;z-index:20" from="500,500" to="500,900" strokeColor="black">
<v:stroke endarrow="classic" dashstyle="Dot"/>
</v:line>
<v:line id="secondline" style="position:relative;z-index:20" from="500,500" to="400,900" strokeColor="black">
<v:stroke endarrow="classic" dashstyle="Dot"/>
</v:line>
<span style="position:relative;top:0;left:92;z-index:25">12</span>
<span style="position:relative;top:93;left:169;z-index:25">3</span>
<span style="position:relative;top:185;left:67;z-index:25">6</span>
<span style="position:relative;top:93;left:-40;z-index:25">9</span>
<v:/group>
<div id=txt style="position:relative;top:220;left:40;border:1px solid black;font-size:12px;width:125;padding:3px"></div>
</body>
</html>

还有很多写得不清楚的，是我还不太明白，请楼主能指教一下，比如箭头是如何随着时间不同而改变它的角度的等
谢谢了～～

[此贴子已经被作者于2006-2-21 10:24:31编辑过]