Weblap Hová jutunk?

Óra mutatóinak egymásra helyezése

Másodpercek mutatója
Percek mutatója
Óra mutatója

A html - fájl tartalma:

<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Óra mutatóinak egymásra helyezése</title>
<link href="wekker.css" rel="stylesheet" type="text/css" />
</head>
<body> <div id="container">
<div class="bemutato">
<script type="text/javascript" language="javascript" src="oramutatok.js"></script>
</div>
</div> </body> </html>

JavaScript program, külön "oramutatok.js" - fájlban írjuk meg.

// Óra mutatói
// vh=Mozgatandó rétegek közötti távolságot határozza meg.
var Y = 110;
var X = 110;
var vhm= 5;
var vhp = 5.5;
var vho = 5;

var mppt=0;
var mptomb= new Array();
for (i=0; i<101; i++) { mptomb[i] = mppt; mppt= mppt+2; }

var ppt=0;
var ptomb= new Array();
for (i=0; i<101; i++) { ptomb[i] = ppt; ppt= ppt+2;}

var opt=0;
var otomb= new Array();
for (i=0; i<101; i++) { otomb[i] = opt; opt= opt+2; }

document.write('<span id="ppont1">.</span>'); document.write('<span id="ppont2">.</span>'); document.write('<span id="ppont3">.</span>'); document.write('<span id="ppont4">.</span>'); document.write('<span id="ppont5">.</span>'); document.write('<span id="ppont6">.</span>'); document.write('<span id="ppont7">.</span>'); document.write('<span id="ppont8">.</span>'); document.write('<span id="ppont9">.</span>'); document.write('<span id="ppont10">.</span>');

document.write('<span id="opont1">.</span>'); document.write('<span id="opont2">.</span>'); document.write('<span id="opont3">.</span>'); document.write('<span id="opont4">.</span>'); document.write('<span id="opont5">.</span>'); document.write('<span id="opont6">.</span>'); document.write('<span id="opont7">.</span>'); document.write('<span id="opont8">.</span>');

document.write('<span id="mpont1">.</span>'); document.write('<span id="mpont2">.</span>'); document.write('<span id="mpont3">.</span>'); document.write('<span id="mpont4">.</span>'); document.write('<span id="mpont5">.</span>'); document.write('<span id="mpont6">.</span>'); document.write('<span id="mpont7">.</span>'); document.write('<span id="mpont8">.</span>'); document.write('<span id="mpont9">.</span>'); document.write('<span id="mpont10">.</span>'); document.write('<span id="mpont11">.</span>'); document.write('<span id="mpont12">.</span>');

function oraMutatok() {
var ido = new Date ();
var masodperc = ido.getSeconds();
var mp = -1.57 + Math.PI * masodperc/30;
var perc = ido.getMinutes();
var p = -1.57 + Math.PI * perc/30;
var ora = ido.getHours();
var o = -1.57 + Math.PI * ora/6 + Math.PI*parseInt(ido.getMinutes())/360;

mpont1.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[0]); mpont1.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[0]);
mpont2.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[1]); mpont2.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[1]);
mpont3.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[2]); mpont3.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[2]);
mpont4.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[3]); mpont4.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[3]);
mpont5.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[4]); mpont5.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[4]);
mpont6.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[5]); mpont6.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[5]);
mpont7.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[6]); mpont7.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[6]);
mpont8.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[7]); mpont8.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[7]);
mpont9.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[8]); mpont9.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[8]);
mpont10.style.marginTop= Y+vhm * (Math.sin(mp) * mptomb[9]); mpont10.style.marginLeft=X+vhm * (Math.cos(mp) * mptomb[9]);
mpont11.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[10]); mpont11.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[10]);
mpont12.style.marginTop = Y+vhm * (Math.sin(mp) * mptomb[11]); mpont12.style.marginLeft =X+vhm * (Math.cos(mp) * mptomb[11]);

//percek percek percek percek percek percek percek percek percek percek percek percek percek
ppont1.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[0]); ppont1.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[0]);
ppont2.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[1]); ppont2.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[1]);
ppont3.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[2]); ppont3.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[2]);
ppont4.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[3]); ppont4.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[3]);
ppont5.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[4]); ppont5.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[4]);
ppont6.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[5]); ppont6.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[5]);
ppont7.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[6]); ppont7.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[6]);
ppont8.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[7]); ppont8.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[7]);
ppont9.style.marginTop = Y +vhp * (Math.sin(p) * ptomb[8]); ppont9.style.marginLeft =X +vhp * (Math.cos(p) * ptomb[8]);
ppont10.style.marginTop= Y +vhp * (Math.sin(p) * ptomb[9]); ppont10.style.marginLeft=X +vhp * (Math.cos(p) * ptomb[9]);

// óramutató óramutató óramutató óramutató óramutató óramutató óramutató óramutató
opont1.style.marginTop = Y +vho * (Math.sin(o) * otomb[0]); opont1.style.marginLeft =X +vho * (Math.cos(o) * otomb[0]);
opont2.style.marginTop = Y +vho * (Math.sin(o) * otomb[1]); opont2.style.marginLeft =X +vho * (Math.cos(o) * otomb[1]);
opont3.style.marginTop = Y +vho * (Math.sin(o) * otomb[2]); opont3.style.marginLeft =X +vho * (Math.cos(o) * otomb[2]);
opont4.style.marginTop = Y +vho * (Math.sin(o) * otomb[3]); opont4.style.marginLeft =X +vho * (Math.cos(o) * otomb[3]);
opont5.style.marginTop = Y +vho * (Math.sin(o) * otomb[4]); opont5.style.marginLeft =X +vho * (Math.cos(o) * otomb[4]);
opont6.style.marginTop = Y +vho * (Math.sin(o) * otomb[5]); opont6.style.marginLeft =X +vho * (Math.cos(o) * otomb[5]);
opont7.style.marginTop = Y +vho * (Math.sin(o) * otomb[6]); opont7.style.marginLeft =X +vho * (Math.cos(o) * otomb[6]);
opont8.style.marginTop = Y +vho * (Math.sin(o) * otomb[7]); opont8.style.marginLeft =X +vho * (Math.cos(o) * otomb[7]);

setTimeout('oraMutatok()', 50);
}
window.onload = oraMutatok;

 

 

 

 

Vissza a lap elejére