Logo Media Nauka
Sklep naukowy

Funkcje wywoływane czasowo w JavaScript

JavaScript daje możliwość wywoływania własnej funkcji co określony czas lub po upływie określonego czasu. Jednostką czasu jest milisekunda. Wystarczy pamiętać, że 1 sekunda - 1000 milisekund.

Oto wspomniane metody wraz z przykładami (wewnątrz opisu metod).

JavaScript umożliwia nam oczywiście także wstrzymywanie wymienionych wyżej metod.


A oto prosty przykład wykorzystania metody setInterval().

Listing 3 - Szablon modułu

<div style="width: 600px; height:20px; position: relative;margin: 5px;">
<div style="width: 0px; height:20px; position: absolute; background-color:#440000" id="Bar1"></div><br>
<div style="width: 10px; height:20px; position: absolute; background-color:#550000" id="Bar2"></div><br>
<div style="width: 20px; height:20px; position: absolute; background-color:#660000" id="Bar3"></div><br>
<div style="width: 30px; height:20px; position: absolute; background-color:#770000" id="Bar4"></div><br>
<div style="width: 40px; height:20px; position: absolute; background-color:#880000" id="Bar5"></div><br>
<div style="width: 50px; height:20px; position: absolute; background-color:#990000" id="Bar6"></div><br>
<div style="width: 60px; height:20px; position: absolute; background-color:#AA0000" id="Bar7"></div><br>
<div style="width: 70px; height:20px; position: absolute; background-color:#BB0000" id="Bar8"></div><br>
<div style="width: 80px; height:20px; position: absolute; background-color:#CC0000" id="Bar9"></div><br>
<div style="width: 90px; height:20px; position: absolute; background-color:#DD0000" id="Bar10"></div><br>
<div style="width: 100px; height:20px; position: absolute; background-color:#EE0000" id="Bar11"></div><br>
</div>
<script>
var element = [];
var w = [0,10,20,30,40,50,60,70,80,90,100];
var d = [1,1,1,1,1,1,1,1,1,1,1];
var ile = 11;
for (var i=1; i<ile+1; i++) {element.push(document.getElementById("Bar"+i));}
var id = setInterval(frame, 20);

function frame() {
for (var i=0; i<ile; i++) {
 if (w[i] == 100) {d[i]=-1;} 
	if (w[i] == 0) {d[i]=1;} 
	w[i]=w[i]+d[i]; 
	element[i].style.width = w[i] + '%'; 
 }
}
</script>
Otwórz Pobierz

























© medianauka.pl, 2017-01-21, ART-3405






Inne zagadnienia z tej lekcji




Polecamy koszyk



© Media Nauka 2008-2017 r.