Weblap Hová jutunk?

Óra hatterszínnel

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

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

// Óra számlapja percek és Arab számok
var r05=110; // A kör sugara
var fok05=0; // Azon fok, mely sin és cos értékét határozza meg
var Y05=110; X05=105; // 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 +6 értékkel növeljük, azaz 6x60=360 fok
i=i+6;
}

var oraszamok=12;
var szamok=12;
var r06=100; // 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=100; X06=100; // 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;
}

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

//"Y" és "X" értéke határozza meg a pozíciót.
var Y = 110;
var X = 110;
// vh=Mozgatandó rétegek közötti távolságot határozza meg.
var vhm= 5;
var vhp = 5.5;
var vho = 5;
//Másodperc szorzóját tároló tömb
var mppt=0;
var mptomb= new Array();
for (i=0; i<101; i++) {
mptomb[i] = mppt;
mppt= mppt+2;
}
//Perc szorzóját tároló tömb
var ppt=0;
var ptomb= new Array();
for (i=0; i<101; i++) {
ptomb[i] = ppt;
ppt= ppt+2;
}
//Óra szorzóját tároló tömb
var opt=0;
var otomb= new Array();
for (i=0; i<101; i++) {
otomb[i] = opt;
opt= opt+2;
}
//A fenti tömbökből egyetlen egy is elegendő akkor, ha mindegyik mutató szorzóját egyenlő értékben határozzuk meg.

// percek kiíratása
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>');
// óramutató pontok kiíratása
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>');
// másodpercek 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>');

//A következő funkció határozza meg, a mutatók pillanatnyi pozícióját.
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;
// másodpercmutató pontok pozíciói
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]);
// permutató pontok pozíciói
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ó pontok pozíciói
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;

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: ora_elokeszito.html

<html>
<head> <title> Óra előkészítő</title>
<link href="wekker.css" rel="stylesheet" type="text/css" />
</head>
<body class="zold_hatterszin">
<div id="oramutatoszamok">
<script language="JavaScript" type="text/javascript" src="ora_szamlapja.js"> </script>
</div>
<div id="oramutatok">
<script type="text/javascript" language="javascript" src="ora_mutatoi.js"></script>
</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>

<div class="az_ora">
<IFRAME src="ora_elokeszito.html" frameborder="0" width="100%" height="300px"> </iframe>
</div>

<p> További szövegsorok </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%;}
.zold_hatterszin{ background-color: #0f0;}

#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;}

#az_ora{ width: 320px; height: 320px; border:none; padding:0.1px; margin-left: 280px;}
#oramutatoszamok{position: absolute; width: 250px; height: 250px; margin-top: 3px; margin-left: 6px; padding:20px;}
#oramutatok{position: absolute; width: 250px; height: 250px; margin-top: 1px; margin-left: 1px; padding:20px;}