Esimerkki edistymispalkki luomisesta JavaScriptillä, CSS:llä ja XHTML:llä.
Demo: http://bluedeath.nurkka.us/progressbar.html
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Latauspalkki</title> <link rel="stylesheet" href="tyyli.css" media="screen" /> <script src="toiminta.js"></script> </head> <body> <div id="palkki"></div> <p><button onClick="aja()">Aja skripti</button></p> </body> </html>
tyyli.css
#palkki {
border-style:solid;
width:500px;
height:35px;
}
.viiva {
height:33px;
width:5px;
margin-top:1px;
margin-bottom:1px;
float:left;
background-color:#00FF00;
}toiminta.js
var i = 0; // Määritellään globaali muuttuja i, joka toimii laskurina.
var painettu = false; // Painettu-muuttujan avulla voidaan tarkistaa, onko nappia jo painettu.
function aja() {
if(!painettu) {
var x = setInterval('isonna()', 100); // Jos nappia ei ole vielä painettu, aloitetaan isonna()-funktion "looppaaminen".
painettu = true; // Kerrotaan, että nappia on painettu. Seuraavan kerran kun käyttäjä painaa nappia, mitään ei tapahdu.
}
}
function isonna() {
if(i == 100) {
clearInterval(x); // Jos palkki on mennyt loppuun, lopetetaan funktion looppaaminen.
} else { // Muuten lisätään yksi viiva lisää.
palkki = document.getElementById('palkki'); // Otetaan palkki-divi, jotta siihen voidaan lisätä viiva.
viiva = document.createElement('div'); // Luodaan div-elementti.
viiva.setAttribute('class', 'viiva'); // Asetetaan luodun div-elementin luokaksi viiva, joka on määritelty CSS:ässä.
palkki.appendChild(viiva); // Lisätään palkki-diviin lapsielementti viiva.
i += 1; // Kasvatetaan i:n arvoa yhdellä.
}
}Aihe on jo aika vanha, joten et voi enää vastata siihen.