Verovatno ste videli na mnogim sajtovima i u skoro svakoj online igrici deo sa odbrojavanjem vremena. Ovo je veoma lako napraviti i zato Vam prikazujemo jednu malu skripticu i primer kako to radi.
<html>
<head>
<title></title>
<script type="text/javascript">
function Vreme(t)
{
document.getElementById('ispis-vremena').innerHTML = t;
t--;
if (t >= 0)
setTimeout('Vreme(' + t + ');', 1000);
else
alert('Vaše vreme je isteklo !');
}
</script>
<style type="text/css">
#ispis-vremena{
width: 100px;
height: auto;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: #dfefff;
font-family: Comic Sans MS;
font-size: 50px;
line-height: 100px;
color: #00007f;
}
</style>
</head>
<body OnLoad='Vreme(10);'>
<div id='ispis-vremena'></div>
</body>
</html>
Da bi ste videli kako ovo radi, u Notepad-u na svom računaru napravite običan tekstualni fajl sa nastavkom .html umesto .txt (npr: index.html ili brojac.html). Zatim kopirajte kompletan kod i snimite. Otvorite u nekom pretraživaču ( FireFox, Opera, Chrome, IE ...)
Kako ovo radi ?
Ceo kod se sastoji iz 3 dela: HTML-a, CSS-a i JavaScript-a. Unutar tagova <script type="text/javascript"></script> pišemo JavaScript kod, a unutar tagova <style type="text/css"></style> pišemo CSS kod. JavaScript i CSS se najčešće piše u posebnim fajlovima, ali pošto je skripta veoma kratka i jednostavna odlučili smo se za varijantu "sve u jednom fajlu".
Kada se učita html stranica pokreće se funkcija Vreme.
<body OnLoad='Vreme(10);'>
Unutar elmenenta čiji je ID="ispis-vremena" ispisujemo vrednost t.
document.getElementById('ispis-vremena').innerHTML = t;
t umanjujemo za 1
t--;
ako je t veće ili jednako od nule po isteku vremena od 1000 ms (tj. 1 sekunde) pokreće se funkcija Vreme, ali kako smo t umanjili za jedan sad se poziva funkcija u obliku Vreme(9).
if (t >= 0)
setTimeout('Vreme(' + t + ');', 1000);
else
alert('Vaše vreme je isteklo !');
ponavljanjem ovog procesa dolazimo do uslova kada će t biti manje od 0. Tada se ispisuje poruka na ekranu i prekida se sa ponovnim pozivanjem funkcije Vreme. Umesto ove poruke, može se nešto drugo uraditi. Npr: ponovo učitati stranica, učitati neka druga stranica, ispisati na ekran neki podatak iz baze...
<html>
<head>
<title></title>
<script type="text/javascript">
function Vreme(t)
{
document.getElementById('ispis-vremena').innerHTML = t;
t--;
if (t >= 0)
setTimeout('Vreme(' + t + ');', 1000);
else
alert('Vaše vreme je isteklo !');
}
</script>
<style type="text/css">
#ispis-vremena{
width: 100px;
height: auto;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: #dfefff;
font-family: Comic Sans MS;
font-size: 50px;
line-height: 100px;
color: #00007f;
}
</style>
</head>
<body OnLoad='Vreme(10);'>
<div id='ispis-vremena'></div>
</body>
</html>
Da bi ste videli kako ovo radi, u Notepad-u na svom računaru napravite običan tekstualni fajl sa nastavkom .html umesto .txt (npr: index.html ili brojac.html). Zatim kopirajte kompletan kod i snimite. Otvorite u nekom pretraživaču ( FireFox, Opera, Chrome, IE ...)
Kako ovo radi ?
Ceo kod se sastoji iz 3 dela: HTML-a, CSS-a i JavaScript-a. Unutar tagova <script type="text/javascript"></script> pišemo JavaScript kod, a unutar tagova <style type="text/css"></style> pišemo CSS kod. JavaScript i CSS se najčešće piše u posebnim fajlovima, ali pošto je skripta veoma kratka i jednostavna odlučili smo se za varijantu "sve u jednom fajlu".
Kada se učita html stranica pokreće se funkcija Vreme.
<body OnLoad='Vreme(10);'>
Unutar elmenenta čiji je ID="ispis-vremena" ispisujemo vrednost t.
document.getElementById('ispis-vremena').innerHTML = t;
t umanjujemo za 1
t--;
ako je t veće ili jednako od nule po isteku vremena od 1000 ms (tj. 1 sekunde) pokreće se funkcija Vreme, ali kako smo t umanjili za jedan sad se poziva funkcija u obliku Vreme(9).
if (t >= 0)
setTimeout('Vreme(' + t + ');', 1000);
else
alert('Vaše vreme je isteklo !');
ponavljanjem ovog procesa dolazimo do uslova kada će t biti manje od 0. Tada se ispisuje poruka na ekranu i prekida se sa ponovnim pozivanjem funkcije Vreme. Umesto ove poruke, može se nešto drugo uraditi. Npr: ponovo učitati stranica, učitati neka druga stranica, ispisati na ekran neki podatak iz baze...
