非常厲害的javascript 實現指針式時間

2019-11-21 02:01:03

字體：大中小

來源：轉載

供稿：網友

<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   class="iwvjtn8m0"   id=txt style="position:relative;top:220;left:40;border:1px solid black;font-size:12px;width:125;padding:3px"></div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：文檔處理系列――隨時更新

下一篇：javascript發表評論或者留言時的展開效果