Kezdő Weblap Hová jutunk?

Ovális óra, azaz wekker

 

 

Óra számlapja percek és Arab számok megjelenítése.
Programunk megírása külön Javascript (js) fájlban. Elnevezése: wekker_szamlap.js

// Óra számlapja, percek és Arab számok
var r05=60; // Azon legnagyobb szabályos kör átmérője, mely az oválisban elhelyezhető.
var fok05=0; // Azon fok, mely sin és cos értékét határozza meg.
var Y05=65; X05=90; // Nagy Y és X határozza meg, a kör központi pozícióját, a monitoron

// Vízszintesen vagy függőlegesen ovális? Ehhez a kék színnel jelölt számokat kell felcserélni, Ha megváltoztatjuk az értéket, akkor az ovális méreteit változtathatjuk.
for (i=0; i < 360;) {
b05=Math.sin(fok05 * Math.PI / 180);
a05=Math.cos(fok05 * Math.PI / 180);
y05=Y05-r05*a05*1;
x05=X05+r05*b05*1.5;
document.write ('<span id="percek" style="position: absolute; margin-top:'+y05+'; margin-left:'+x05+'">');
document.write ("");
document.write ('</span>');
fok05=fok05+6; // fok értékét minden lefutás végén +6 értékkel növeljük
i=i+6;
}

var oraszamok=12;
var szamok=12;
var r06=50; // Azon kör mérete, melyen a számok elhelyezkednek
var fok06=0; // Azon fok, mely sin és cos értékét határozza meg
var Y06=57; X06=85; // Nagy Y és X határozza meg, a kör központi pozícióját, a monitoron

// Vízszintesen vagy függőlegesen ovális? Ehhez a kék színnel jelölt számokat kell felcserélni, Ha megváltoztatjuk az értéket, akkor az ovális méreteit változtathatjuk.
for (i=0; i < 360; ) {
b06=Math.sin(fok06 * Math.PI / 180);
a06=Math.cos(fok06 * Math.PI / 180);
y06=Y06-r06*a06*1;
x06=X06+r06*b06*1.6;

//Minden lefutáskor, kiíratjuk az óra számait az adott pozícióban.
document.write ('<span id="oraszamok" style="position: absolute; margin-top:'+y06+'; margin-left:'+x06+'">');
document.write (szamok);
document.write ('</span>');

fok06=fok06+30; // fok értékét minden lefutás végén +30 értékkel növeljük (12x30=360 fok)
oraszamok=oraszamok+1; //Óra számainak értékét minden lefutás után növeljük 1-el.
b=oraszamok; //Óra számainak értéke ez lesz: 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
szamok=b-12; //Számok helyesen jelenjenek meg, az elsőt kivéve, mindegyikből kivonunk 12-öt
i=i+30; // A for ciklus léptékeinek, meg kell egyezni a fokok léptékeivel, azaz léptéke ennek is 30
}

 

 

Az óra mutatóinak megjelenítése.
Programunk megírása külön Javascript (js) fájlban. Elnevezése:wekker_mutatok.js

//Ovális pályán mozgó mutatók.
//Megkeressük azon jelölőelemet, melyben a mutatók megjelennek (wekkermutatok) és hozzárendeljük egy változóhoz pl: idelem
var idelem=document.getElementById? document.getElementById("wekkermutatok") :
document.all? document.all.wekkermutatok: "";

//Meghatározzuk az oldal frissítésének periódusát.
var ID=window.setTimeout("oraMutatoi(); " , 50) ;

// Mozgatandó rétegek közötti távolságot határozzuk meg.
var Yp = 5.7;
var Xp = 5.7;

//Készítünk három tömböt, egyet a másodperc, egyet a perc és egyet az óramutatónak.
var masodperctomb= new Array();
var perctomb= new Array();
var oratomb= new Array();

function oraMutatoi(){
//Meghatározzuk, a mutatók forgási központjának pozícióját
var mytavolsag = 60; var mxtavolsag = 85;
var pytavolsag = 60; var pxtavolsag = 85;
var oytavolsag = 60; var oxtavolsag = 85;

//Meghívjuk a JavaScript beépített dátum és idő függvényeit
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;

for (i=0; i<10;) {
masodpercpont=('<span id="omp" style="margin-top:'+mytavolsag+'; margin-left:'+mxtavolsag+'">.</span>');
masodperctomb[i] =masodpercpont;
percpont=('<span id="op" style="margin-top:'+pytavolsag+'; margin-left:'+pxtavolsag+'">.</span>');
perctomb[i] =percpont;
orapont=('<span id="oo" style="margin-top:'+oytavolsag+'; margin-left:'+oxtavolsag+'">.</span>');
oratomb[i] =orapont;

//Vízszintesen vagy függőlegesen ovális a mutatók kinyúlása? Ehhez a kék színnel jelölt számokat kell felcserélni, mindegyik mutatónál egyformán. Ha megváltoztatjuk az értéket, akkor az ovális kinyúlás méreteit változtathatjuk.
MY=Yp * (Math.sin(mp) * 2); mytavolsag=mytavolsag+MY; //Másodperc mutató Y pozíciója
MX=Xp * (Math.cos(mp) * 3); mxtavolsag =mxtavolsag+MX; //Másodperc mutató X pozíciója

PY=Yp * (Math.sin(p) * 2); pytavolsag=pytavolsag+PY; //Perc mutató Y pozíciója
PX=Xp * (Math.cos(p) * 3); pxtavolsag =pxtavolsag+PX; //Perc mutató X pozíciója

OY=Yp * (Math.sin(o) * 2); oytavolsag=oytavolsag+OY; //Óra mutató Y pozíciója
OX=Xp * (Math.cos(o) * 3); oxtavolsag =oxtavolsag+OX; //Óra mutató X pozíciója

i++;
}

//Tömbökből kiíratunk annyi pontot, amennyi a mutatók hosszához szükségeltetik.
//Figyeljünk a folyamatos leírásra, azaz a két zárójel "( )" között, ne üssük le az ENTER billentyűt!

idelem.innerHTML = (perctomb[0] + perctomb[1] + perctomb[2] + perctomb[3] + perctomb[4] + perctomb[5] + oratomb[0] + oratomb[1] + oratomb[2] + oratomb[3] + masodperctomb[0] + masodperctomb[1] + masodperctomb[2] + masodperctomb[3] + masodperctomb[4] + masodperctomb[5]);

//A funkció megismétlése.
ID=window.setTimeout("oraMutatoi(); " , 50) ;
}

 

 

Azon weboldal XHTML - fájl tartalma, melyben csak az órát jelenítjük meg, azaz semmi mást nem tartalmaz, és az óra is a bal felső sarokban jelenjen meg!

Az xhtml - fájl elnevezése: wekker_elokeszito.html

<html>
<head> <title>Wekker előkészitő</title>
<link href="wekker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wekker_ora">

<div id="wekker_szamlap">
<script language="JavaScript" type="text/javascript" src="wekker_szamlap.js"> </script>
</div>
<div id="wekkermutatok:">
<script type="text/javascript" language="javascript" src="wekker_mutatok.js"> </script>
</div>

</div>
</body>
</html>

 

 

Azon weboldal XHTML - fájl tartalma, melyben a szövegfolyam mellett, az órát tetszőleges pozícióban fogjuk megjeleníteni.

Az xhtml - fájl elnevezése: Tetszőleges elnevezés adható.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Ovális óra azaz wekker</title>
<meta name="description" content="Miről akarod tájékoztatni a nagyközönséget." />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="wekker.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="container">
<h1> Ovális óra azaz wekker </h1>
<p> Szövegsorok </p>

<table align="center" class="web_wekker">
<caption>Komplett óra háttérképpel</caption>
<tr> <td>
<iframe src=" wekker_elokeszito.html" frameborder="0" width="100%" height="142px"> </iframe>
</td> </tr>
</table>

<p> További szövegsorok </p>
</div> </body> </html>

 

 

Stíluslap, azaz a wekker.css fájl tartalma.

#percek{position: absolute; width: 2px; height:2px; color: black; font-size: 2px; background-color: black;}
#oraszamok{color: black; font size: 16px; font-weight: bold;}

#omp {position:absolute; width: 1px; height: 1px; background-color: red; font-size: 1px; color: red; text-align: center; padding:1px;}
#op {position:absolute; width: 2px; height: 2px; background-color: blue; font-size: 2px; color: blue; text-align: center; padding:1px;}
#oo {position:absolute; width: 2px; height: 2px; background-color: black; font-size: 2px; color: black; text-align: center; padding:1px;}

#wekker_ora{width: 145px; height: 140px; padding: 0.1px; background: url(wekkerhatterkep_200x200.jpg);}
#wekker_szamlap{position: absolute; width: 130px; height: 130px; margin: 0.1px; padding: 0.1px; margin-top: 3px; margin-left: 6px;}
#wekkermutatok{position: absolute; width: 130px; height: 130px; margin: 0.1px; padding: 0.1px; margin-top: 10px; margin-left: 10px; }

.web_wekker{width: 200px; border: 1px solid blue; padding:0.1px;}
.web_wekker td{padding:0.1px; border: none;}

A .web_wekker stílusánál, úgy határozzuk meg a szélességet, hogy az óra teljes méretében elférjen