Fortschrittsbalken

Finn

Hey
Bin ziemlich neu bei HTML und Javascript, aber versuche mich gerade an einem Fortschrittsbalken. Sprich: Ein Bild(ein Balken) soll nach Angabe mehrmals hintereinander angezeigt werden. (z.B. bei 2 2 Balken,bei 3 3 Balken, und so weiter).
mein ansatz:

.html

<p>
Project:
	<script type="text/javascript">
		process(10);
	</script>
</p>

.js:

function process(number)
{
	for(i=1;i<=number;i++)
		Document.write("<img src='./Images/balken.png'>");
}

Leider funktioniert das so nicht Hilfe
Gruß,
Finn

Rhombicosidodecahedron

[quote][html]<!-- Alles ungetestet. -->
<div id="progressBar" style="height:0;width:0;background:url('./Images/balken.png') repeat-x left center" />
[/html][java]
/*const*/ var blockSize = 16 /*px*/;

function process(number) {
 document.getElementById("progressBar").style.width = number * blockSize + "px";
}
[/java][/quote]Zu deinem Code:

Zwei probleme treten auf:
Wo werden den die Images hingeschreiben?

Wie oft wird den Bild für i=1 erzeugt?
→-> Du solltest number zwischenspeicherm und nur die neu hinzugekommenen zeichen nicht alle. Sonst zeichnest du immer n*(n-1)/2 Bilder.

Finn

Wo werden den die Images hingeschreiben?

Was meinst du damit? Ich denke an die Stelle, an der die Funktion ausgeführt wird, oder nicht?

Das Zweite problem sollte so zu lösen sein, oder?

var bars;

function process(number)
{
    if(number != bars)
        bars = number;

    for(i=1;i<=number;i++)
        Document.write("<img src='./Images/balken.png'>");

Hallo,

du machst in deinem Code nichts anderes als wahnsinnig schnell hintereinander das gleiche Bild in den Browser zu jagen. Was du suchst ist sicher eine Art Sleep-Funktion. Nun kennt JS kein Sleep, also muss man sich ein Workaround bauen, oder gleich anders an die Sache rangehen. Mein Vorschlag:

var number = 0;
var fullload = 10;

process();

function process()
{
   if (number==fullload) return;

   document.write("<img src='./Images/balken.png' />");
   number++;
   window.setTimeout("process()", 500); // Funktion, Interval
}

@Rhombicosidodecahedron: Wieso überschreibt er bei jedem Schleifendurchlauf die vorher erstellten Bilder? Die Funktion wird einmal aufgerufen und die Schleife wird einmal durchlaufen. Das ganze in den Schritten: 1,2,3,4, ...
Da wird nix doppelt geschrieben...

LG

Finn

Mit deiner Lösung ist es aber einfach ein Ladebalken, der sich automatisch bis auf 10 Balken auffüllt! Was ich brauche ist eine Funktion um einfach eine feste Anzahl an Balken anzuzeigen. Beim Aufrufen der Seite sag ich dann z.B. der Frotschritt soll 50% sein und dann soll es 5 balken anzeigen. Und dann nichts mehr daran ändern

Finn

Habs jetzt doch selbst hinbekommen

.js

function process(number) 
{ 
	for(i=1;i<=number;i++)
		document.write("<img src='./Images/balken.png' />");

	document.write("  "+number+"%");
}

.html

<script type="text/javascript">
		process(100);
	</script>

eigentlich war meine erste Lösung richtig...ich hatte "Document" groß geschrieben... -.-

Danke trotzdem für die Mühe

Rhombicosidodecahedron

JS schrieb:

@Rhombicosidodecahedron: Wieso überschreibt er bei jedem Schleifendurchlauf die vorher erstellten Bilder? Die Funktion wird einmal aufgerufen und die Schleife wird einmal durchlaufen. Das ganze in den Schritten: 1,2,3,4, ...
Da wird nix doppelt geschrieben...

LG

Ich halte von document.write nichts. Falls im Code sonst irgendwo process() erneut aufgerufen werden sollte, wegen dynamischer Anzeige, hätte dieses ja nicht funktioniert.

" Wieso überschreibt er bei jedem Schleifendurchlauf die vorher erstellten Bilder? " Er tut es ja gerade nicht.

Ich hatte mir zu dem Zeitpunkt vorgestellt die Funktion würde schrittweise Aufgerufen. Dies hätte zur Folge, dass beim jeden Schritt alle alten Bilder erneut erstellt werden. Da der Fehler "Leider funktioniert das so nicht" nicht mehr hergibt, dachte ich, dass der Fehler sit, dass der Balken quadratisch wächst.

Sonst habe ich eine Varainte in meinem vorherigen Posting versteckt, die das gleiche erzeihlt ohne document.write und ohne schleife. Einfach zitieren, dann sieht man den Text.

P.S.: blockSize soll die Bildbreite sein.

So ein Balken ließe sich doch auch über CSS realisieren. Warum sich an JS binden?

Finn

,,,, schrieb:

So ein Balken ließe sich doch auch über CSS realisieren. Warum sich an JS binden?

Lerneffekt^^

Wenn jemand das Resultat sehen will,finnhax.co.cc und dann auf Projects

PRIEST

,,,, schrieb:

So ein Balken ließe sich doch auch über CSS realisieren. Warum sich an JS binden?

dacht ich mir auch zuerst.

Herrmann

Habs jetzt nicht getestet, aber so ähnlich sollte es funktionieren.

<script type="text/javascript">
    function setProgress(i) {
        document.getElementById('progress_inner').style.width=i+'%';
    }

    setProgress(50);
</script>

<div style="320px; height:30px;">
    <div id="progress_inner" style="height:30px;">
    </div>
</div>