Weblap Hová jutunk?

Óra mutatója

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

A html - fájl tartalma:

<html>
<head> <title>Óra 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="oramutato.js"> </script>
</div>
</div> </body> </html>

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

// Óra mutatója
var Y = 110;
var X = 110;
var vh= 5; // vh=Mozgatandó rétegek közötti távolságot határozza meg.
var opt=0;
var otomb= new Array();
for (i=0; i<101; i++) {
otomb[i] = opt;
opt= opt+2;
}
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>');
function oraMutato() {
var ido = new Date ();
var ora = ido.getHours();
var o = -1.57 + Math.PI * ora/6 + Math.PI*parseInt(ido.getMinutes())/360;

opont1.style.marginTop = Y +vh * (Math.sin(o) * otomb[0]); opont1.style.marginLeft =X +vh * (Math.cos(o) * otomb[0]);
opont2.style.marginTop = Y +vh * (Math.sin(o) * otomb[1]); opont2.style.marginLeft =X +vh * (Math.cos(o) * otomb[1]);
opont3.style.marginTop = Y +vh * (Math.sin(o) * otomb[2]); opont3.style.marginLeft =X +vh * (Math.cos(o) * otomb[2]);
opont4.style.marginTop = Y +vh * (Math.sin(o) * otomb[3]); opont4.style.marginLeft =X +vh * (Math.cos(o) * otomb[3]);
opont5.style.marginTop = Y +vh * (Math.sin(o) * otomb[4]); opont5.style.marginLeft =X +vh * (Math.cos(o) * otomb[4]);
opont6.style.marginTop = Y +vh * (Math.sin(o) * otomb[5]); opont6.style.marginLeft =X +vh * (Math.cos(o) * otomb[5]);
opont7.style.marginTop = Y +vh * (Math.sin(o) * otomb[6]); opont7.style.marginLeft =X +vh * (Math.cos(o) * otomb[6]);
opont8.style.marginTop = Y +vh * (Math.sin(o) * otomb[7]); opont8.style.marginLeft =X +vh * (Math.cos(o) * otomb[7]);

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

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;}
#opont1, #opont2, #opont3, #opont4, #opont5, #opont6, #opont7, #opont8{position:absolute; width: 2px; height: 2px; background-color: black; font-size: 2px; color: black; text-align: center; padding:1px;}

 

 

 

Vissza a lap elejére