VisszalépDigitális óra, mely folyamatosan mutatja a pontos időt.

Ha a javascript programot azon html - fájlban helyezzük el, hól az órát megakarjuk jeleníteni, és nem külön jávascrip fájlban, melynek kiterjesztése ( js ).
Az óra indítási utasítását, a kezdő body címkében helyezzük el:
<body onLoad="startclock()">

Ha külön jávascript - fájlban írjuk meg, akkor az ott lévő programban kell elhelyezni az óra indítására vonatkozó utasítást:
// óra indítása, az oldal betöltésekor
window.onload = startclock;

A html-fájl, és css, azaz stílus- fájl megírása

html-fájl megírása
<link href="Css-fájl-neve.css" rel="stylesheet" type="text/css" /> 
<head>
<body>
<FORM name="clock" class="clock">
<script language="JavaScript" type="text/javascript" src="java-fájl-neve.js"></script>
<table class="tabla">
<tr><td><input type="text" name="digiora" size="11" class="digiora" value=""></td></td>
</table>
</FORM>
</body>
</html>

Css-fájl megírása
.digiora {text-align: center; font-family: Arial; font-size: 20px; font-weight: bold;  background-color: yellow; border: none;}
.tabla {margin-left: 300px; background-color: #fff;}

A class="digiora" azonositóval:
- Css, azaz stíluslapon határozzuk meg az óra számainak méretét.
- A szöveg méretével arányosan változik az ablak mérete
- A szöveg stílusát és méretét, feltétlen adjuk meg, Explorer - Mozilla összhang végett.
- Az óra keretében megjelenő számokat: balra, középre vagy jobbra helyezhetjük.

 

 

Mostantól, IFRAME szakaszban jelenítjük meg az órát.

Ezzel a megoldással, egy adott weboldalon, többször is megjeleníthetjük a digitálisórát.
Ellenkezőleg, az input-os behívásos megoldással, mert ott, egy adott weboldalon, csak egyszer jeleníthető meg.
Ehhez, készítünk egy külön html, js és css fájlt ( seged elnevezéssel )

Külső, azaz segéd html-fájl, és css, azaz stílus- fájl megírása

Segéd, html-fájl tartalma:
<script language="JavaScript" type="text/javascript" src="java-fájl-neve.js"></script>
<link href="seged002_css.css" rel="stylesheet" type="text/css" /> 
</head>

<body>
<FORM name="clock" class="clock">
<input type="text" name="digiora" size="11" class="digiora" value=""> 
</FORM>
</body>
</html>

Segéd, Css-fájl tartalma:
.clock {width: 110px; height: 25px; padding-top: 2px; overflow: hidden;}
.clock { background-color: yellow;}
.digiora {font-weight: bold; font-size: 10pt; border: none; background-color: yellow;}

Azon html - fájl, melyben az órát megakarjuk, jeleníteni, és a hozzá tartozó css - fájl

A html-fájl tartalma:
<div id="pelda001">
<IFRAME src="segéd-html-fájl-neve.html" frameborder="0" width="110" height="28" 
class="rama001"> 
</IFRAME> 
</div>

 Css-fájl tartalma:
#pelda001 {width: 520px;  overflow: hidden; margin-top: 30px; margin-left: 150px;}
#pelda001 {text-align: center; padding-top: 5px; padding-bottom: 3px;  border: 1px solid blue;}
.rama001 {overflow: hidden;}

 

 

A következő részben, táblázat cellájában helyezzük el az órát, és az eléje írt szöveget ( Pontos idő: )

Megírása külső, html- és css-fájlban

A html-fájl tartalma:
<script language="JavaScript" type="text/javascript" src="java-fájl-neve.js"></script>
<link href="css-fájl-neve.css" rel="stylesheet" type="text/css" /> 
</head>

<body>
<FORM name="clock" class="clock">
<table class="tabla">
<tr>
<td>Pontos idő:</td>
<td><input type="text" name="digiora" size="11" class="digiora" value=""></td> 
</tr>
</table>
</FORM>
</body>
</html>

 Css-fájl tartalma:
A width értékét 250px alá vesszük, nem jelenik meg az óra elé írt szöveg teljes teartalma, 
még akkor sem, ha az külön cellában van
Jelen esetben, ez határozza meg, a táblázat teljes szélességét

.clock {width: 230px; height: 24px; vertical-align: top; margin-top: -3px;  overflow: hidden;}
.digiora {width: 100px; font: 10pt Ariel; font-weight: bold; border: none; background-color: yellow;}

.tabla {border: none; background-color: #fff;}
.tabla td {font-size: 11pt; font-weight: bold;  vertical-align: top;}

Azon html - fájl, melyben az órát megakarjuk, jeleníteni, és a hozzá tartozó css - fájl

A html-fájl tartalma:
<div id="pelda002"> 
<IFRAME src="seged-html-fájl-neve.html" frameborder="0" width="280" height="55" 
class="rama002"> 
</IFRAME> 
</div>

Css-fájl tartalma:
#pelda002 {width: 520px;  overflow: hidden; margin-top: 30px; margin-left: 150px;}
#pelda002 {text-align: center; padding-top: 5px; padding-bottom: 3px;  border: 1px solid blue;}
.rama002 {overflow: hidden;}

 

 

Mindegyik óra megjelenítéséhez, a következő javascript, azaz js kiterjesztésű programot alkalmazzuk.

var timerID = null;
var timerRunning = false;

function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >24) ? hours -24 :hours)


timeValue = ((timeValue <10)? "0":"") + timeValue
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 24) ? " pm" : " am"
document.clock.digiora.value = timeValue;
timerID = setTimeout("showtime()",100);
timerRunning = true;
}
function startclock() {
stopclock();
showtime();
}
// óra indítása, az oldal betöltésekor
window.onload = startclock;