Kirjautuminen

Haku

Tehtävät

Kilpailu

Putka Open 2025
4. kierros:
7.11. klo 18 – 9.11. klo 23

Keskustelu: Koodit: JavaScript: Edistymispalkki

pake10 [04.07.2010 18:08:43]

#

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ä.
  }

}

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta