Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » Đồng hồ kim có số đơn giản
URL: https://www.javascriptbank.com/dhtml-analog-clock-script.html
Hiệu ứng tạo một đồng hồ kim có số đơn giản trên trang web.
Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » Đồng hồ kim có số đơn giản
URL: https://www.javascriptbank.com/dhtml-analog-clock-script.html
<SCRIPT language=javascript>var dot=65rads=new Array(65)function rad () {for (i=1; i<dot; i++) {if (document.all) rads[i]=new Array (eval('rad'+i).style,-100,-100)else rads[i] = new Array (eval('document.rad'+i),-100,-100)}}function setCircle() {for (i=1; i<dot; i++) {rads[i][0].left=rads[i][1]+pX-15if (document.layers) rads[i][0].left+=10rads[i][0].top=rads[i][2]+pY-15//if (document.layers) rads[i][0].top-=5}}function counter() {for (i=1; i<dot; i++) {rad=Math.PI*(i/((dot-1)/2))rads[i][1] = Math.sin(rad)*60;rads[i][2] = -Math.cos(rad)*60;}setCircle()}pX=100;pY=100obs = new Array(13)function ob () {for (i=0; i<13; i++) {if (document.all) obs[i]=new Array (eval('ob'+i).style,-100,-100)else obs[i] = new Array (eval('document.ob'+i),-100,-100)}}function cl(a,b,c){if (document.all) {if (a!=0) b+=-1eval('c'+a+'.style.pixelTop='+(pY+(c-5)))eval('c'+a+'.style.pixelLeft='+(pX+(b)))}else{if (a!=0) b+=10eval('document.c'+a+'.top='+(pY+(c)))eval('document.c'+a+'.left='+(pX+(b)))}}function runClock() {for (i=0; i<13; i++) {obs[i][0].left=obs[i][1]+pXobs[i][0].top=obs[i][2]+pY}}var lastsecfunction timer() {time = new Date ()sec = time.getSeconds()if (sec!=lastsec) {lastsec = secsec=Math.PI*sec/30min=Math.PI*time.getMinutes()/30hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360for (i=1;i<6;i++) {obs[i][1] = Math.sin(sec) * (44 - (i-1)*11)-16;if (document.layers)obs[i][1]+=10;obs[i][2] = -Math.cos(sec) * (44 - (i-1)*11)-27;}for (i=6;i<10;i++) {obs[i][1] = Math.sin(min) * (40 - (i-6)*10)-16;if (document.layers)obs[i][1]+=10;obs[i][2] = -Math.cos(min) * (40 - (i-6)*10)-27;}for (i=10;i<13;i++) {obs[i][1] = Math.sin(hr) * (37 - (i-10)*11)-16;if (document.layers)obs[i][1]+=10;obs[i][2] = -Math.cos(hr) * (37 - (i-10)*11)-27;}}}function setNum(){cl (0,-67,-65);cl (1,10,-51);cl (2,28,-33);cl (3,35,-8);cl (4,28,17);cl (5,10,35);cl (6,-15,42);cl (7,-40,35);cl (8,-58,17);cl (9,-65,-8);cl (10,-58,-33);cl (11,-40,-51);cl (12,-16,-56);}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload="rad();counter();ob();setNum();setInterval('timer()',100);setInterval('runClock()',100)"><DIV id=c0 style="LEFT: 36px; POSITION: relative; TOP: 36px; Z-INDEX: 2"><TABLE> <TBODY> <TR> <TD bgColor=#ffffff height=126 width=126> </TD></TR></TBODY></TABLE></DIV><DIV id=c1 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>1</B></DIV><DIV id=c2 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>2</B></DIV><DIV id=c3 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>3</B></DIV><DIV id=c4 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>4</B></DIV><DIV id=c5 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>5</B></DIV><DIV id=c6 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>6</B></DIV><DIV id=c7 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>7</B></DIV><DIV id=c8 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>8</B></DIV><DIV id=c9 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>9</B></DIV><DIV id=c10 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>10</B></DIV><DIV id=c11 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>11</B></DIV><DIV id=c12 style="FONT-SIZE: 11px; LEFT: 20px; POSITION: absolute; TOP: -20px; Z-INDEX: 5"><B>12</B></DIV><DIV id=ob0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"></DIV><DIV id=ob1 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob2 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob3 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob4 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob5 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#0000ff size=+3><B>.</B></FONT></DIV><DIV id=ob6 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT></DIV><DIV id=ob7 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT></DIV><DIV id=ob8 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT></DIV><DIV id=ob9 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#00ffff size=+3><B>.</B></FONT></DIV><DIV id=ob10 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ff0000 size=+3><B>.</B></FONT></DIV><DIV id=ob11 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ff0000 size=+3><B>.</B></FONT></DIV><DIV id=ob12 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 6"><FONT color=#ff0000 size=+3><B>.</B></FONT></DIV><DIV id=rad0 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 1"></DIV><DIV id=rad1 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad2 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad3 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad4 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad5 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad6 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad7 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad8 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad9 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad10 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad11 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad12 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad13 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad14 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad15 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad16 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad17 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad18 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad19 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad20 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad21 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad22 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad23 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad24 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad25 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad26 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad27 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad28 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad29 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad30 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad31 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad32 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad33 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad34 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad35 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad36 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad37 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad38 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad39 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad40 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad41 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad42 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad43 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad44 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad45 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad46 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad47 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad48 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad49 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad50 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad51 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad52 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad53 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad54 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad55 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad56 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad57 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad58 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad59 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad60 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad61 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 8"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad62 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad63 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV><DIV id=rad64 style="LEFT: -20px; POSITION: absolute; TOP: -20px; Z-INDEX: 7"><FONT color=#000000><B>.</B></FONT></DIV></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->