JavaScript

JavaScripti >> Ure in koledarji >> Super analogna ura

Opis:
V desnem spodnjem kotu spletne strani se pojavi analogna ura, ki kaže točen čas. Ampak to ni čisto navadna ura, saj ima označene ure od 01-24, in tudi minute so označene (na vsakih 5minut).

Primer:
Poglejte v desni spodnji kot. Barve sem priredi tako, zato ker sem želel, da ura ne bi bila preveč opazna in tako motila obiskovalcev na vaši spletni strani. Barve lahko spremenite po vaših potrebah.

Izvorna koda:

<script language="JavaScript"> f1Col='ccccc0';//face colour. f2Col='ccccc0';//face colour. d1Col='ff0000';//dot colour. d2Col='ff0000';//dot colour. hCol='00ff00';//boja za sate. mCol='00ff00';//boja za minute. sCol='00ff00';//boja za sekunde . ClockHeight=50; ClockWidth=50; h=10; m=7; s=7; face24='06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 01 02 03 04 05'; face24=face24.split(' '); n1=face24.length; face12='15 20 25 30 35 40 45 50 55 0 5 10'; face12=face12.split(' '); n2=face12.length; p="<font face=Arial size=1 color=#"+f1Col+">"; p2="<font face=Arial size=1 color=#"+f2Col+">"; e=360/n1; e2=360/n2 e3=360/60 HandHeight=ClockHeight/6; HandWidth=ClockWidth/6; y=0; x=0; ns6=(document.getElementById&&!document.all); ns=(document.layers); ie=(document.all); if (ns){ for (i=0; i < n1; i++) document.write('<layer name="nshour24'+i+'" top=0 left=0 height=15 width=15><center>'+p+face24[i]+'</font></center></layer>'); for (i=0; i < n1; i++) document.write('<layer name=nsdots1'+i+' top=0 left=0 bgcolor='+d1Col+' clip="0,0,2,2"></layer>'); for (i=0; i < n2; i++) document.write('<layer name="nshour12'+i+'" top=0 left=0 height=15 width=15><center>'+p2+face12[i]+'</font></center></layer>'); for (i=0; i < 12; i++) document.write('<layer name=nsdots2'+i+' top=0 left=0 bgcolor='+d2Col+' clip="0,0,2,2"></layer>'); for (i=0; i < h; i++) document.write('<layer name=nsH'+i+' top=0 left=0 bgcolor='+hCol+' clip="0,0,2,2"></layer>'); for (i=0; i < m; i++) document.write('<layer name=nsM'+i+' top=0 left=0 bgcolor='+mCol+' clip="0,0,2,2"></layer>'); for (i=0; i < s; i++) document.write('<layer name=nsS'+i+' top=0 left=0 bgcolor='+sCol+' clip="0,0,2,2"></layer>'); } if (ie||document.getElementById){ for (i=0; i < n1; i++) document.write('<div id="hour24'+i+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;text-align:center">'+p+face24[i]+'</font></div>'); for (i=0; i < n1; i++) document.write('<div id="dots1'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+d1Col+'"></div>'); for (i=0; i < n2; i++) document.write('<div id="hour12'+i+'" style="position:absolute;top:0px;left:0px;width:15px;height:15px;text-align:center">'+p2+face12[i]+'</font></div>'); for (i=0; i < 12; i++) document.write('<div id="dots2'+i+'" style="position:absolute;top:0px;left:0px;height:2px;width:2px;font-size:2px;background:#'+d2Col+'"></div>'); for (i=0; i < h; i++) document.write('<div id="ieH'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+hCol+'"></div>'); for (i=0; i < m; i++) document.write('<div id="ieM'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+mCol+'"></div>'); for (i=0; i < s; i++) document.write('<div id="ieS'+i+'" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#'+sCol+'"></div>'); } function Scroll(){ if (ns){ y=window.pageYOffset+window.innerHeight-ClockHeight*2; x=window.pageXOffset+window.innerWidth-ClockWidth*2.3; } if (ns6){ y=window.pageYOffset+window.innerHeight-ClockHeight*2.1; x=window.pageXOffset+window.innerWidth-ClockWidth*2.2; } if (ie){ y=document.body.scrollTop+window.document.body.clientHeight-ClockHeight*2; x=document.body.scrollLeft+window.document.body.clientWidth-ClockWidth*2; } setTimeout('Scroll()',50); } Scroll(); function ClockAndAssign(){ 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/12 + Math.PI*parseInt(time.getMinutes())/720; for (i=0; i < s; i++){ var cs=(ns)?document.layers['nsS'+i]:(ie)?document.all['ieS'+i].style:document.getElementById("ieS"+i).style; cs.top=y+(i*HandHeight)*Math.sin(sec); cs.left=x+(i*HandWidth)*Math.cos(sec); } for (i=0; i < m; i++){ var cm=(ns)?document.layers['nsM'+i]:(ie)?document.all['ieM'+i].style:document.getElementById("ieM"+i).style; cm.top=y+(i*HandHeight)*Math.sin(min); cm.left=x+(i*HandWidth)*Math.cos(min); } for (i=0; i < h; i++){ var ch=(ns)?document.layers['nsH'+i]:(ie)?document.all['ieH'+i].style:document.getElementById("ieH"+i).style; ch.top=y+(i*HandHeight)*Math.sin(hrs); ch.left=x+(i*HandWidth)*Math.cos(hrs); } for (i=0; i < 12; i++){ var d2=(ns)?document.layers['nsdots2'+i]:(ie)?document.all['dots2'+i].style:document.getElementById("dots2"+i).style; d2.top=y + ClockHeight*Math.sin(-1.0471 + i*e2*Math.PI/180); d2.left=x + ClockWidth*Math.cos(-1.0471 + i*e2*Math.PI/180); } for (i=0; i < n2; i++){ var h12=(ns)?document.layers['nshour12'+i]:(ie)?document.all['hour12'+i].style:document.getElementById("hour12"+i).style; h12.top=y-6 + ClockHeight*1.2*Math.sin(i*e2*Math.PI/180); h12.left=x-6 + ClockWidth*1.2*Math.cos(i*e2*Math.PI/180); } for (i=0; i < n1; i++){ var d1=(ns)?document.layers['nsdots1'+i]:(ie)?document.all['dots1'+i].style:document.getElementById("dots1"+i).style; d1.top=y + ClockHeight*1.5*Math.sin(-1.0471 + i*e*Math.PI/180); d1.left=x + ClockWidth*1.5*Math.cos(-1.0471 + i*e*Math.PI/180); } for (i=0; i < n1; i++){ var h24=(ns)?document.layers['nshour24'+i]:(ie)?document.all['hour24'+i].style:document.getElementById("hour24"+i).style; h24.top=y-6 + ClockHeight*1.7*Math.sin(i*e*Math.PI/180); h24.left=x-6 + ClockWidth*1.7*Math.cos(i*e*Math.PI/180); } setTimeout('ClockAndAssign()',500); } ClockAndAssign(); </script>