JS 钟表
欢迎技术交流。 QQ：138986722
第一个：
<html xmlns:v="urn:schemas-microsoft-com:vml"> <mce: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") } // --></mce: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" mce_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" mce_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" mce_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>
第二个：
<SCRIPT language=JavaScript> <!-- Begin fCol = '000000'; //face colour. sCol = 'ff0000'; //seconds colour. mCol = '000000'; //minutes colour. hCol = '000000'; //hours colour. H = '....'; H = H.split(''); M = '.....'; M = M.split(''); S = '......'; S = S.split(''); Ypos = 0; Xpos = 0; Ybase = 8; Xbase = 8; dots = 12; ns = (document.layers)?1:0; if (ns) { dgts = '1 2 3 4 5 6 7 8 9 10 11 12'; dgts = dgts.split(' '); for (i = 0; i < dots; i++) { document.write('<layer name=nsDigits'+i+' top=0 left=0 height=30 width=30><center><font face=Arial,Verdana size=1 color='+fCol+'>'+dgts[i]+'</font></center></layer>'); } for (i = 0; i < M.length; i++) { document.write('<layer name=ny'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>'); } for (i = 0; i < H.length; i++) { document.write('<layer name=nz'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>'); } for (i = 0; i < S.length; i++) { document.write('<layer name=nx'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>'); } } else { document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative" mce_style="position:relative">'); for (i = 1; i < dots+1; i++) { document.write('<div id="ieDigits" style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative" mce_style="position:relative">'); for (i = 0; i < M.length; i++) { document.write('<div id=y style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>'); } document.write('</div></div>') document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative" mce_style="position:relative">'); for (i = 0; i < H.length; i++) { document.write('<div id=z style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>'); } document.write('</div></div>') document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative" mce_style="position:relative">'); for (i = 0; i < S.length; i++) { document.write('<div id=x style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>'); } document.write('</div></div>') } function clock() { time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs/30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins/30; hr = time.getHours(); hrs = -1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360; if (ns) { Ypos = window.pageYOffset+window.innerHeight-60; Xpos = window.pageXOffset+window.innerWidth-80; } else { Ypos = document.body.scrollTop + window.document.body.clientHeight - 60; Xpos = document.body.scrollLeft + window.document.body.clientWidth - 60; } if (ns) { for (i = 0; i < dots; ++i){ document.layers["nsDigits"+i].top = Ypos - 5 + 40 * Math.sin(-0.49+dots+i/1.9); document.layers["nsDigits"+i].left = Xpos - 15 + 40 * Math.cos(-0.49+dots+i/1.9); } for (i = 0; i < S.length; i++){ document.layers["nx"+i].top = Ypos + i * Ybase * Math.sin(sec); document.layers["nx"+i].left = Xpos + i * Xbase * Math.cos(sec); } for (i = 0; i < M.length; i++){ document.layers["ny"+i].top = Ypos + i * Ybase * Math.sin(min); document.layers["ny"+i].left = Xpos + i * Xbase * Math.cos(min); } for (i = 0; i < H.length; i++){ document.layers["nz"+i].top = Ypos + i * Ybase * Math.sin(hrs); document.layers["nz"+i].left = Xpos + i * Xbase * Math.cos(hrs); } } else{ for (i=0; i < dots; ++i){ ieDigits[i].style.pixelTop = Ypos - 15 + 40 * Math.sin(-0.49+dots+i/1.9); ieDigits[i].style.pixelLeft = Xpos - 14 + 40 * Math.cos(-0.49+dots+i/1.9); } for (i=0; i < S.length; i++){ x[i].style.pixelTop = Ypos + i * Ybase * Math.sin(sec); x[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(sec); } for (i=0; i < M.length; i++){ y[i].style.pixelTop = Ypos + i * Ybase * Math.sin(min); y[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(min); } for (i=0; i < H.length; i++){ z[i].style.pixelTop = Ypos + i * Ybase*Math.sin(hrs); z[i].style.pixelLeft = Xpos + i * Xbase*Math.cos(hrs); } } setTimeout('clock()', 50); } if (document.layers || document.all) window.onload = clock; // End --> </SCRIPT>