Weblap Hová jutunk?

Wekker egyszerűen leírása

 

JavaScript program, külön "wekker_mutatok.js" - fájlban írjuk meg.
var ID=window.setTimeout("WekkerMutatoi(); " , 50) ;
var idelem=document.getElementById? document.getElementById("weboldalioramutatok") : document.all? document.all.weboldalioramutatok: "";

//Meghatározzuk a mutatókat alkotó pontok, azaz a mozgatandó rétegek közötti távolságot.
var Yp = 5.7;
var Xp = 5.7;
//Mindegyik mutatónak, létrehozunk egy tömböt.
var masodperctomb= new Array();
var perctomb= new Array();
var oratomb= new Array();

//Készítünk egy funkciót, WekkerMutatoi elnevezéssel, mely megjeleníti és működteti a mutatókat.
function WekkerMutatoi(){
var mytavolsag = 60; var mxtavolsag = 60; //másodpercmutató pozíciója "y" és x" koordinátán
var pytavolsag = 60; var pxtavolsag = 60; //percmutató pozíciója "y" és x" koordinátán
var oytavolsag = 60; var oxtavolsag = 60; //óramutató pozíciója "y" és x" koordinátán

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;) {
masodpercMutato=('<span id="omp" style="margin-top:'+mytavolsag+'; margin-left:'+mxtavolsag+'">.</span>');
masodperctomb[i] =masodpercMutato;
percMutato=('<span id="op" style="margin-top:'+pytavolsag+'; margin-left:'+pxtavolsag+'">.</span>');
perctomb[i] =percMutato;
oraMutato=('<span id="oo" style="margin-top:'+oytavolsag+'; margin-left:'+oxtavolsag+'">.</span>');
oratomb[i] =oraMutato;

MY=Yp * (Math.sin(mp) * 2); mytavolsag = mytavolsag+MY;
MX=Xp * (Math.cos(mp) * 2); mxtavolsag = mxtavolsag+MX;
PY=Yp * (Math.sin(p) * 2); pytavolsag = pytavolsag+PY;
PX=Xp * (Math.cos(p) * 2); pxtavolsag = pxtavolsag+PX;
OY=Yp * (Math.sin(o) * 2); oytavolsag = oytavolsag+OY;
OX=Xp * (Math.cos(o) * 2); oxtavolsag = oxtavolsag+OX;

i++;
}
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] );

ID=window.setTimeout("WekkerMutatoi(); " , 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: ora_wekker.html
<html>
<head> <title>Óra_wekker</title>
<link href="wekker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="komplett_wekker">
<div id="wekker_szamlap">
<script language="JavaScript" type="text/javascript" src="wekker_szamlapja.js"> </script> </div>
<div id="wekker_mutatoi">
<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.
<!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>Tetszőleges elnevezés</title>
<link href="wekker.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="container">
<h1>Komplett óra_wekker</h1>
<p> Szöveg megírása </p>

<div class="bemutato"> <iframe src="ora_wekker.html" frameborder="0" width="100%" height="300px"> </iframe> </div>

<p> Szöveg megírása </p>
</div> </body> </html>

Stíluslap, azaz a wekker.css fájl tartalma.
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;}
h1 {font-size: 35px; color: #363; text-align: center;}
p {font-size: 16px; font-style: Times New Roman; line-height: 130%;}

#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:yellow; font-size: 1px; color: yellow; 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: purple; font-size: 2px; color: purple; text-align: center; padding:1px;}

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

.bemutato{ width: 320px; height: 320px; border:none; padding:0.1px; margin-left: 280px;}

A wekker számlapjának megjelenítéséhez szükséges JavaScript fájl tartalmát, lásd az óra háttérképpel témakörben. Vagy kattints ide!