JavaScript

JavaScripti >> Ure in koledarji >> Rimska ura

Opis:
Analogna ura, ki prikazuje čas v rimskih številkah, se pojavi okoli miškinega kazalca in mu vedno sledi (miškin kazalec je sredina ure).

Primer:

XII

I

II

III

IV

V

VI

VII

VIII

IX

X

XI

.

.

.

.

.

.

.

.

.

Izvorna koda:

Korak 1:
Skopirajte kodo v <body> del vaše spletne strani:

<script language="javascript"> oDivs = new Array() iDivs = 0 ie = document.all ? true : false function yo (s, x, y) { if (ie) oDivs[iDivs] = new Array (eval('yo'+s).style, iXTo, iYTo, x, y) else oDivs[iDivs] = new Array (eval('document.yo'+s), iXTo, iYTo, x, y) iDivs++ } iXTo = 200 iYTo = 200 function setMove(e) { if (ie) { iXTo = event.x iYTo = event.y } else { iXTo = e.pageX iYTo = e.pageY } //document.forms[0].elements[0].value = iXTo+", "+iYTo } function move() { x = iXTo y = iYTo for (i=0; i<iDivs; i++) { oDivs[i][1] = oDivs[i][1] * 0.5 + x * 0.5 oDivs[i][2] = oDivs[i][2] * 0.5 + y * 0.5 oDivs[i][0].left = oDivs[i][1] + oDivs[i][3] oDivs[i][0].top = oDivs[i][2] + oDivs[i][4] x = oDivs[i][1] y = oDivs[i][2] } } function dont () { event.returnValue = false } iLastS = -1 function plupp () { time = new Date () iS = time.getSeconds() if (iS != iLastS) { iLastS = iS iS = 2 * 3.1415 * time.getSeconds() / 60 iM = 2 * 3.1415 * time.getMinutes() / 60 iH = 2 * 3.1415 * time.getHours() / 12 + 31.415 * parseInt (time.getMinutes() / 5) / 720 for (i=13;i<16;i++) { oDivs[i][3] = Math.sin(iS) * (45 - (i-13)*16) - 15 oDivs[i][4] = -Math.cos(iS) * (45 - (i-13)*16) - 3 } for (i=16;i<19;i++) { oDivs[i][3] = Math.sin(iM) * (37 - (i-16)*10) - 15 oDivs[i][4] = -Math.cos(iM) * (37 - (i-16)*10) - 3 } for (i=19;i<22;i++) { oDivs[i][3] = Math.sin(iH) * (27 - (i-19)*7) - 15 oDivs[i][4] = -Math.cos(iH) * (27 - (i-19)*7) - 3 } } } </script> <style> .crap { font-family:verdana;color:#00FF00;font-size:10px;cursor:default;width:30px;text-align:center; } </style> <div id="yo0" class="crap" style="position:absolute;left:135;top:135;; z-index: 2"></div> <div id="yo1" class="crap" style="position:absolute;left:200;top:200;; z-index: 4">XII</div> <div id="yo2" class="crap" style="position:absolute;left:200;top:200;; z-index: 5">I</div> <div id="yo3" class="crap" style="position:absolute;left:200;top:200;; z-index: 6">II</div> <div id="yo4" class="crap" style="position:absolute;left:200;top:200;; z-index: 7">III</div> <div id="yo5" class="crap" style="position:absolute;left:200;top:200;; z-index: 8">IV</div> <div id="yo6" class="crap" style="position:absolute;left:200;top:200;; z-index: 9">V</div> <div id="yo7" class="crap" style="position:absolute;left:200;top:200;; z-index: 10">VI</div> <div id="yo8" class="crap" style="position:absolute;left:200;top:200;; z-index: 11">VII</div> <div id="yo9" class="crap" style="position:absolute;left:200;top:200;; z-index: 12">VIII</div> <div id="yo10" class="crap" style="position:absolute;left:200;top:200;; z-index: 13">IX</div> <div id="yo11" class="crap" style="position:absolute;left:200;top:200;; z-index: 14">X</div> <div id="yo12" class="crap" style="position:absolute;left:200;top:200;; z-index: 15">XI</div> <div id="yo13" class="crap" style="position:absolute;left:200;top:200;; z-index: 16"><FONT COLOR="#FF0000"><b>.</b></FONT></div> <div id="yo14" class="crap" style="position:absolute;left:200;top:200;; z-index: 17"><FONT COLOR="#FF0000"><b>.</b></FONT></div> <div id="yo15" class="crap" style="position:absolute;left:200;top:200;; z-index: 18"><FONT COLOR="#FF0000"><b>.</b></FONT></div> <div id="yo16" class="crap" style="position:absolute;left:200;top:200;; z-index: 19"><FONT COLOR="#0000FF"><b>.</b></FONT></div> <div id="yo17" class="crap" style="position:absolute;left:200;top:200;; z-index: 20"><FONT COLOR="#0000FF"><b>.</b></FONT></div> <div id="yo18" class="crap" style="position:absolute;left:200;top:200;; z-index: 21"><FONT COLOR="#0000FF"><b>.</b></FONT></div> <div id="yo19" class="crap" style="position:absolute;left:200;top:200;; z-index: 22"><FONT COLOR="#0000FF"><b>.</b></FONT></div> <div id="yo20" class="crap" style="position:absolute;left:200;top:200;; z-index: 23"><FONT COLOR="#0000FF"><b>.</b></FONT></div> <div id="yo21" class="crap" style="position:absolute;left:200;top:200;; z-index: 24"><FONT COLOR="#0000FF"><b>.</b></FONT></div> <div id="Layer1" style="position:absolute; left:97px; top:372px; width:179px; height:4px; z-index:3"><font face="verdana" size=1><br> </font></div> <script langage="javascript"> yo ("0", -65, -65) yo ("1", -15, -58) yo ("2", 10, -51) yo ("3", 28, -33) yo ("4", 35, -8) yo ("5", 28, 17) yo ("6", 10, 35) yo ("7", -15, 42) yo ("8", -40, 35) yo ("9", -58, 17) yo ("10", -65, -8) yo ("11", -58, -33) yo ("12", -40, -51) yo ("13", -15, 0) yo ("14", -15, 0) yo ("15", -15, 0) yo ("16", -15, 0) yo ("17", -15, 0) yo ("18", -15, 0) yo ("19", -15, 0) yo ("20", -15, 0) yo ("21", -15, 0) plupp() setInterval ("plupp()", 200) setInterval ("move()", 10) if (!ie) { document.captureEvents (Event.MOUSEMOVE) document.onMouseMove = setMove } </script>

Korak 2:
Vaša <body> vrstica naj bi izgledala nekako takole:

<body onMouseMove="setMove()" onSelectStart="dont()">