Kezdő Weblap Hová jutunk?

Óra háttérképpel

 

Óra számlapja

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

var r05=60; // A kör sugara
var fok05=0; // Azon fok, mely sin és cos értékét határozza meg
var Y05=65; X05=65; // Nagy Y és X határozza meg, a kör központi pozícióját, a monitoron

for (i=0; i < 360;) {
b05=Math.sin(fok05 * Math.PI / 180);
a05=Math.cos(fok05 * Math.PI / 180);

y05=Y05-r05*a05;
x05=X05+r05*b05;
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 +1 értékkel növeljük
i=i+6;
}

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

for (i=0; i < 360; ) {
b06=Math.sin(fok06 * Math.PI / 180);
a06=Math.cos(fok06 * Math.PI / 180);

y06=Y06-r06*a06;
x06=X06+r06*b06;
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)
oraszamok=oraszamok+1;
b=oraszamok;
szamok=b-12;
i=i+30;
}

 

Óra mutatói

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

// vh=Mozgatandó rétegek közötti távolságot határozza meg.
var Y = 57;
var X = 62;
var vhm= 4.2;
var vhp = 4.6;
var vho = 4.8;
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="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="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>');

function mpercMutato() {
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]);

//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]);

// ó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]);

setTimeout('mpercMutato()', 50);
}
window.onload = mpercMutato;
Komplett óra
háttérképpel

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 pl: wekker_elokeszito.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Weboldali Óra mutatói</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="../weboldali_percszamjs.js"> </script>
</div>
<div id="wekker_mutatoi">
<script type="text/javascript" language="javascript" src="../weboldali_mpomutatokjs.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> Wekkert megjelenítő weboldal</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> Címsor </h1>
<p> Szövegsorok </p>

<table width="154px" align="center" border="0" 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;}

#mpont1, #mpont2, #mpont3, #mpont4, #mpont5, #mpont6, #mpont7, #mpont8, #mpont9, #mpont10, #mpont11, #mpont12, #mpont13, #mpont14, #mpont15, #mpont16, #mpont17, #mpont18, #mpont19, #mpont20 {position:absolute; width: 1px; height: 1px; background-color: red; font-size: 1px; color: red; text-align: center; padding:1px;}

#ppont1, #ppont2, #ppont3, #ppont4, #ppont5, #ppont6, #ppont7, #ppont8, #ppont9, #ppont10, #ppont11, #ppont12, #ppont13, #ppont14, #ppont15, #ppont16, #ppont17, #ppont18, #ppont19, #ppont20 {position:absolute; width: 2px; height: 2px; background-color: blue; font-size: 2px; color: blue; text-align: center; padding:1px;}

#opont1, #opont2, #opont3, #opont4, #opont5, #opont6, #opont7, #opont8, #opont9, #opont10, #opont11, #opont12, #opont13, #opont14, #opont15, #opont16, #opont17, #opont18, #opont19, #opont20 {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_145x140.jpg);}
#wekker_szamlap{position: absolute; width: 130px; height: 130px; margin: 0.1px; padding: 0.1px; margin-top: 3px; margin-left: 6px;}
#wekker_mutatoi{position: absolute; width: 130px; height: 130px; margin: 0.1px; padding: 0.1px; margin-top: 10px; margin-left: 10px; }

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