Weblap Hová jutunk?

Óra percek mutatója

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

A html - fájl tartalma:

<html>
<head> <title>Perc 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="percmutato.js"></script>
</div>
</div> </body> </html>

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

// perc mutatója
var Yp = 110;
var Xp = 110;
var vhp= 4.5; // vhp=Mozgatandó rétegek közötti távolságot határozza meg.
var ppt=0;
var ptomb= new Array();
for (i=0; i<101; i++) {
ptomb[i] = ppt;
ppt= ppt+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="ppont8">.</span>');
document.write('<span id="ppont9">.</span>');
document.write('<span id="ppont10">.</span>');

function percMutato() {
var pido = new Date ();
var perc = pido.getMinutes();
var p = -1.57 + Math.PI * perc/30;

ppont1.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[0]);
ppont1.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[0]);

ppont2.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[1]);
ppont2.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[1]);

ppont3.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[2]);
ppont3.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[2]);

ppont4.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[3]);
ppont4.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[3]);

ppont5.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[4]);
ppont5.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[4]);

ppont6.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[5]);
ppont6.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[5]);

ppont7.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[6]);
ppont7.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[6]);

ppont8.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[7]);
ppont8.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[7]);

ppont9.style.marginTop = Yp +vhp * (Math.sin(p) * ptomb[8]);
ppont9.style.marginLeft =Xp +vhp * (Math.cos(p) * ptomb[8]);

ppont10.style.marginTop= Yp +vhp * (Math.sin(p) * ptomb[9]);
ppont10.style.marginLeft=Xp +vhp * (Math.cos(p) * ptomb[9]);

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

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;}
#ppont1, #ppont2, #ppont3, #ppont4, #ppont5, #ppont6, #ppont7, #ppont8, #ppont9, #ppont10{position:absolute; width: 2px; height: 2px; background-color: blue; font-size: 2px; color: blue; text-align: center; padding:1px;}

 

 

 

Vissza a lap elejére