Weblap Hová jutunk?

Óra másodpercek mutatója

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

A html - fájl tartalma:

<html>
<head> <title>Másodperc mutató</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="masodpercmutato.js"> </script>
</div>
</div> </body> </html>

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

// Másodperc mutató
var Y = 110;
var X = 110;
var vh= 4; // vh=Mozgatandó rétegek közötti távolságot határozza meg.

//Következő lépésben, a vonalat alkotó pontok, "y" és "x" koordinátájának szorzóját határozzuk meg.
// Ha Y és X értéke nem egyforma, akkor tojás alakú kört ír le, a mutató
//var y1tavolsag = 0;
//var x1tavolsag = 0;
//var y2tavolsag = 2;
//var x2tavolsag = 2;
//var y3tavolsag = 4;
//var x3tavolsag = 4;
//var y4tavolsag = 6;
//var x4tavolsag = 6;
//var y5tavolsag = 8;
//var x5tavolsag = 8;
//var y6tavolsag = 10;
//var x6tavolsag = 10;
//var y7tavolsag = 12;
//var x7tavolsag = 12;
//var y8tavolsag = 14;
//var x8tavolsag = 14;
//var y9tavolsag = 16;
//var x9tavolsag = 16;
//var y10tavolsag =18;
//var x10tavolsag =18;

//A következő for ciklus, a fenti meghatározásokat helyettesíti. A mptomb= new Array(), a következő adatokat tárolja
//A vonalat alkotó pontok, "y" és "x" koordinátájának szorzóját
// Ha "X" és "Y" értékek szorzója nem egyforma, akkor tojás alakú kört ír le, a mutató. De ehhez kettő for ciklust és kettő tömböt kell készíteni, egyik az y a másik az x értékeket helyezi az adott tömbökbe.
var mppt=0;
var mptomb= new Array();
for (i=0; i<101; i++) {
mptomb[i] = mppt;
mppt= mppt+2;
}

//Következő lépés, a mutatót alkotó pontok egyedi id azonosítása, és azok kiíratása.
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>');

//Következő lépés, a mutatót alkotó pontok pozícionálása az eltelt másodperceknek megfelelően.
function mpercMutato() {
var ido = new Date ();
var masodperc = ido.getSeconds();
var mp = -1.57 + Math.PI * masodperc/30;

mpont1.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[0]);
mpont1.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[0]);

mpont2.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[1]);
mpont2.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[1]);

mpont3.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[2]);
mpont3.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[2]);

mpont4.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[3]);
mpont4.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[3]);

mpont5.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[4]);
mpont5.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[4]);

mpont6.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[5]);
mpont6.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[5]);

mpont7.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[6]);
mpont7.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[6]);

mpont8.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[7]);
mpont8.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[7]);

mpont9.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[8]);
mpont9.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[8]);

mpont10.style.marginTop= Y +vh * (Math.sin(mp) * mptomb[9]);
mpont10.style.marginLeft=X +vh * (Math.cos(mp) * mptomb[9]);

mpont11.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[10]);
mpont11.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[10]);

mpont12.style.marginTop = Y +vh * (Math.sin(mp) * mptomb[11]);
mpont12.style.marginLeft =X +vh * (Math.cos(mp) * mptomb[11]);

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

Stílus fájl tartalma (wekker.css).

body{font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc;}
#container{width: 800px; margin-top: 15px; margin-right: auto; margin-left: auto; padding-left:5px;}
.bemutato{width: 320px; height: 320px; border:none; padding:0.1px; margin-left: 280px;}
#mpont1, #mpont2, #mpont3, #mpont4, #mpont5, #mpont6, #mpont7, #mpont8, #mpont9, #mpont10, #mpont11, #mpont12{position:absolute; width: 1px; height: 1px; background-color: red; font-size: 1px; color: red; text-align: center; padding:1px;}

 

 

 

Vissza a lap elejére