nicht angemeldet
wachsender balken
HI!
ich habe folgendes problem: ich habe einen balken, der eine zufaellige laenge hat.
er waechselt die farbe je nach laenge von gruen auf gelb auf rot. dies funktioniert gut, sowohl auf ie als auch auf ns.
jetzt soll der balken aber wachsen, also von null auf die zufallszahl.
wer helfen kann, sofort loesung posten.
zur erklaerung noch: man sieht eine tabelle, oben ist der balken, darunter ist die farbe im hexadezimalen system, wiederrum darunter ist die jeweilige zufallszahl.
OK hier ist der quelltext:
<html>
<head>
<title>verschiedenfarbiger Balken als Tabelle</title>
</head>
<body bgcolor="#000033" text="#ff9900">
<script language="Javascript">
<!--
var a = 0
while(a<1) /* es entsteht die zufallszahl*/
{
a = Math.random();
a*=255;
a = Math.ceil(a);
}
var b = a * 2
var red = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); /* fuer den farbuebergang ins gelbe wird die zufallszahl von dezimal in hexa dezimal umgerechnet */
var redhex1 = b / 16;
redhex1 = Math.floor(redhex1);
var redhex2 = b % 16;
var c = 255 - a
var neggreen = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); /* fuer den farbuebergang ins rote wird die zufallszahl von dezimal in hexa dezimal umgerechnet */
var neggreenhex1 = c / 16;
neggreenhex1 = Math.floor(neggreenhex1);
var neggreenhex2 = c % 16;
if(a<30)
{
document.write("<table border=10 bgcolor=#00cc00><tr><td width=" + a + " height=20> </td></tr></table>");
document.write("<table border bgcolor=#0000><tr><td>#00cc00</td></tr></table>");
document.write("<table border bgcolor=#0000><tr><td>" + a + "</td></tr></table>");
}
else
if(a<128)
{
document.write("<table border=10 bgcolor=#" + red[redhex1] + red[redhex2] + "ff00><tr><td width=" + a + " height=20> </td></tr></table>");
document.write("<table border bgcolor=#0000><tr><td>#" + red[redhex1] + red[redhex2] + "ff00</td></tr></table>");
document.write("<table border bgcolor=#0000><tr><td>" + b + "</td></tr></table>");
}
else
{
document.write("<table border=10 bgcolor=#ff" + neggreen[neggreenhex1] + neggreen[neggreenhex2] + "00><tr><td width=" + a + " height=20> </td></tr></table>");
document.write("<table border bgcolor=#0000><tr><td>#ff" + neggreen[neggreenhex1] + neggreen[neggreenhex2] + "00</td></tr></table>");
document.write("<table border bgcolor=#0000><tr><td>" + c + "</td></tr></table>");
}
//-->
</script>
</body>
</html>
THANX,
CU,
vmx.
-
Versuche es mal so:
var i=0;
function Balken() {
i=i+1;
hier kommt dein Script rein und für die Weite setzt du dann einfach i ein.
if i<100 setTimeout("Balken()",1000)
}Und im Body onlad="Balken()".
das setTimeout läßt den Balken langsam wachsen.Statt eine Tabelle zu erzeugen würde ich selbst es mit einem Div versuchen, der dann eine Hintergrundfarbe bekommt.
Viele Grüße
Antje
-
Hallo vmx,
wie gestern versprochen, habe ich mir dein Script angeschaut und es umgebaut. Allerdings nicht optimiert.
Jetzt funktioniert es in beiden Browsern.<html>
<head>
<title>Farbbalken</title>
<style type="text/css">
<!--
#bal {position:absolute;top:10;left:10;width:240;height:10;border:thin;}
#farbe {position:absolute;top:30;left:10;width:200;height:20;border:solid;}
#zahl {position:absolute;top:70;left:10;width:200;height:20;border:solid;}//-->
</style>
<script language="JavaScript">
<!--
var i=0;
var a = 0;
function Balken()
{i=i+1;/*while (a<1)*/
{
a = Math.random();
a=a*255;
a = Math.ceil(a);
d=a;}
/* a=d; */
var b = avar red = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); /* fuer den farbuebergang ins gelbe wird die zufallszahl von dezimal in hexa dezimal umgerechnet */
var redhex1 =b/16;
redhex1 = Math.floor(redhex1);
var redhex2 = b % 16;var c = 255 - a
var neggreen = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); /* fuer den farbuebergang ins rote wird die zufallszahl von dezimal in hexa dezimal umgerechnet */
var neggreenhex1 = c/16;
neggreenhex1 = Math.floor(neggreenhex1);
var neggreenhex2 = c % 16;if(i<30)a="#00cc00" ;else if(i<60)a="#"+red[redhex1]+red[redhex2]+"ff00"; else a="#ff" + neggreen[neggreenhex1] + neggreen[neggreenhex2] + "00";
if (document.all) /*IE-Syntax*/
{
document.all.bal.style.width=2*i;
document.all.bal.style.backgroundColor=a;
document.all.farbe.innerText=a;
document.all.zahl.innerText=d;
}
else { /*Navi-Syntax*/
document.bal.bgColor=a;
document.bal.resizeTo(2*i,10);
document.farbe.document.open();
document.farbe.document.write(a);
document.farbe.document.close();
document.zahl.document.open();
document.zahl.document.write(d);
document.zahl.document.close();
}if (i<101) setTimeout("Balken()",100);
}//-->
</script>
</head>
<body onLoad="Balken()">
<div id="bal"> </div>
<div id="farbe"> </div>
<div id="zahl"> </div>
</body>
</html>Das Vorgehensprinzip:
Du definierst drei Divbereiche, die später die gewünschten Werte aufnehmen.
In bal wird der Balken farbig dargestellt. Farbe und zahl nehmen die entsprechenden Werte auf.
Die Weite der Vergrößerung entspricht jeweils dem doppelten Wert von i. Im setTimeout kannst du die Geschwindigkeit des Wachstums einstellen.
Gegenwärtig ändert der Balken laufend seine Farbe. Möchtest du es nicht, dann entferne in den beiden auskommentierten Zeilen einfach die Kommentarzeichen.Viele Grüße
Antje
PS: Diese AUfgabe hat mir einfach Spaß gemacht.
-
Hallo vmx,
wie gestern versprochen, habe ich mir dein Script angeschaut und es umgebaut. Allerdings nicht optimiert.
Jetzt funktioniert es in beiden Browsern.<html>
<head>
<title>Farbbalken</title>
<style type="text/css">
<!--
#bal {position:absolute;top:10;left:10;width:240;height:10;border:thin;}
#farbe {position:absolute;top:30;left:10;width:200;height:20;border:solid;}
#zahl {position:absolute;top:70;left:10;width:200;height:20;border:solid;}//-->
</style>
<script language="JavaScript">
<!--
var i=0;
var a = 0;
function Balken()
{i=i+1;/*while (a<1)*/
{
a = Math.random();
a=a*255;
a = Math.ceil(a);
d=a;}
/* a=d; */
var b = avar red = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); /* fuer den farbuebergang ins gelbe wird die zufallszahl von dezimal in hexa dezimal umgerechnet */
var redhex1 =b/16;
redhex1 = Math.floor(redhex1);
var redhex2 = b % 16;var c = 255 - a
var neggreen = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); /* fuer den farbuebergang ins rote wird die zufallszahl von dezimal in hexa dezimal umgerechnet */
var neggreenhex1 = c/16;
neggreenhex1 = Math.floor(neggreenhex1);
var neggreenhex2 = c % 16;if(i<30)a="#00cc00" ;else if(i<60)a="#"+red[redhex1]+red[redhex2]+"ff00"; else a="#ff" + neggreen[neggreenhex1] + neggreen[neggreenhex2] + "00";
if (document.all) /*IE-Syntax*/
{
document.all.bal.style.width=2*i;
document.all.bal.style.backgroundColor=a;
document.all.farbe.innerText=a;
document.all.zahl.innerText=d;
}
else { /*Navi-Syntax*/
document.bal.bgColor=a;
document.bal.resizeTo(2*i,10);
document.farbe.document.open();
document.farbe.document.write(a);
document.farbe.document.close();
document.zahl.document.open();
document.zahl.document.write(d);
document.zahl.document.close();
}if (i<101) setTimeout("Balken()",100);
}//-->
</script>
</head>
<body onLoad="Balken()">
<div id="bal"> </div>
<div id="farbe"> </div>
<div id="zahl"> </div>
</body>
</html>Das Vorgehensprinzip:
Du definierst drei Divbereiche, die später die gewünschten Werte aufnehmen.
In bal wird der Balken farbig dargestellt. Farbe und zahl nehmen die entsprechenden Werte auf.
Die Weite der Vergrößerung entspricht jeweils dem doppelten Wert von i. Im setTimeout kannst du die Geschwindigkeit des Wachstums einstellen.
Gegenwärtig ändert der Balken laufend seine Farbe. Möchtest du es nicht, dann entferne in den beiden auskommentierten Zeilen einfach die Kommentarzeichen.Viele Grüße
Antje
PS: Diese AUfgabe hat mir einfach Spaß gemacht.
Hi Antje!
Ich beziehe mich auf MEINEN Quelltext (der Erste)(einzige Aenderung: Gruen nicht #00cc00, sondern #00ff00).
Ich glaube du hast da etwas uebersehen (der Balken wechselt die Farbe unregelmaessig):
Ich will ja, dass der Balken waechst und die Farbe aendert (in eiem schoenen Uebergang von Gruen auf Gelb auf Rot.
Die Farbe soll (wenn die Zufallszahl 255 ist):Anfangs gruen (#00ff00) sein (wenn die Zufallszahl a > 30 ist).
In der Mitte dann gelb (wenn die Zufallszahl a > 128 ist).
ABER: Fuer Gelb muss der Rotwert ja genauso hoch sein wie der Gruenwert.
Also muss bei a = 127 der Rotwert bei ff liegen.
Deswegen weise ich (vor dem array red) b den Wert a*2 zu.
Das geht bei deinem script aber nichtmehr (und ich weiß nicht warum).
Am Schluss dann rot (wenn die Zufallszahl a groesser ist)(anscheinend fast gleiches Problem wie bei Gelb)OK,Ich hoffe du hast noch Lust es zu verbessern, oder wenn jemand will der nicht Antje heisst, der darf natürlich auch verbessern.
THANX,
CU,
vmx.-
var b = a
Ich glaube du hast da etwas uebersehen (der Balken
Also muss bei a = 127 der Rotwert bei ff liegen.
Deswegen weise ich (vor dem array red) b den Wert a*2 zu.
Das geht bei deinem script aber nichtmehr (und ich weiß nicht warum).Weil jetzt direkt die Farbeigenschaften angesprochen und ausgelesen werden.
Ist für b=2*a z.B. b=300 ergibt sich daraus in deinem Verfahren der gerundete Wert von 19. Das Array enthält aber nur 16 Elemente. Der IE findet nichts und eine Fehlermeldung kommt. Der Navi ignoriert es und stellt diesen Farbteil nicht dar.
OK,Ich hoffe du hast noch Lust es zu verbessern,
Nein, habe ich nicht :-). Ich habe dir das dynamische Wachsen des Balkens geliefert. Das allein war mein Ziel. Um die Farben habe ich mich nicht weiter gekümmert.
Da ich gar nicht gerne mit Farben experimentiere, tue ich mir das auch nicht an.Viele Grüße
Antje
-
HI!
Diesmal funktioniert es sogar mit den richtigen Farben.
Allerdings nur mit dem NS.
Der IE ist warscheinlich zu schnell.
Deswegen wäre ein delay in der Schleife nicht Schlecht.
Wer helfen kann, hier ist das script.<html>
<head>
<title>Farbbalken</title>
<style type="text/css">
<!--
#bal {position:absolute;top:10;left:10;width:240;height:10;border:thin;}
#farbe {position:absolute;top:30;left:10;width:200;height:20;border:solid;}
#zahl {position:absolute;top:70;left:10;width:200;height:20;border:solid;}//-->
</style>
<script language="JavaScript">
<!--var a = 0;
function Balken()
{
a = Math.random();
a = a*255;
a = Math.ceil(a);
d = a;for(i=0;i<=a;i++)
{
if(i<30)
{
var z = "#00ff00" ;
}else if(i<128)
{
var b = i*2;var red = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
var redhex1 = b/16;
redhex1 = Math.floor(redhex1);
var redhex2 = b%16;var z = "#" + red[redhex1] + red[redhex2] + "ff00";
}else
{
var c = 511-(i*2);var neggreen = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
var neggreenhex1 = c/16;
neggreenhex1 = Math.floor(neggreenhex1);
var neggreenhex2 = c % 16;var z = "#ff" + neggreen[neggreenhex1] + neggreen[neggreenhex2] + "00";
}if (document.all) /*IE-Syntax*/
{
document.all.bal.style.width=2*i;
document.all.bal.style.backgroundColor=z;
document.all.farbe.innerText=z;
document.all.zahl.innerText=d;
}
else
{ /*Navi-Syntax*/
document.bal.bgColor=z;
document.bal.resizeTo(2*i,10);
document.farbe.document.open();
document.farbe.document.write(z);
document.farbe.document.close();
document.zahl.document.open();
document.zahl.document.write(d);
document.zahl.document.close();
}
}
}//-->
</script>
</head>
<body onLoad="Balken()">
<div id="bal"> </div>
<div id="farbe"> </div>
<div id="zahl"> </div>
</body>
</html>THANX,
CU,
vmx.-
Hi vmx,
war nur eine Kleinigkeit, wirst es ja selbst finden :-)
<html>
<head>
<title>Farbbalken</title>
<style type="text/css">
<!--
#bal {position:absolute;top:10;left:10;width:240;height:10;border:thin;}
#farbe {position:absolute;top:30;left:10;width:200;height:20;border:solid;}
#zahl {position:absolute;top:70;left:10;width:200;height:20;border:solid;}//-->
</style>
<script language="JavaScript">
<!--
var a = Math.random();
a = a*255;
a = Math.ceil(a);
d = a;
i=0;function Balken()
{{i++;
if(i<30)
{
var z = "#00ff00" ;
}else if(i<128)
{
var b = i*2;var red = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
var redhex1 = b/16;
redhex1 = Math.floor(redhex1);
var redhex2 = b%16;var z = "#" + red[redhex1] + red[redhex2] + "ff00";
}else
{
var c = 511-(i*2);var neggreen = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
var neggreenhex1 = c/16;
neggreenhex1 = Math.floor(neggreenhex1);
var neggreenhex2 = c % 16;var z = "#ff" + neggreen[neggreenhex1] + neggreen[neggreenhex2] + "00";
}if (document.all) /*IE-Syntax*/
{
document.all.bal.style.width=2*i;
document.all.bal.style.backgroundColor=z;
document.all.farbe.innerText=z;
document.all.zahl.innerText=d;
}
else
{ /*Navi-Syntax*/
document.bal.bgColor=z;
document.bal.resizeTo(2*i,10);
document.farbe.document.open();
document.farbe.document.write(z);
document.farbe.document.close();
document.zahl.document.open();
document.zahl.document.write(d);
document.zahl.document.close();
}
}
if (i<a) setTimeout("Balken()",300);}//-->
</script>
</head>
<body onLoad="Balken()">
<div id="bal"> </div>
<div id="farbe"> </div>
<div id="zahl"> </div>
</body>
</html>Viele Grüße
Antje
-
That's it.
DANKE ANTJE.
CU,
vmx.
-
-
-
-
Hallo!
- Bitte nicht das Gesamtpostings quote, wenn du darauf keinen bezug nimmst.
- schue dir die Links an, dort wird mit sich verändernden Farben gearbeitet:
http://www.webaid.de/js/index.shtml?jav14.shtml
http://www.webaid.de/js/index.shtml?jav105.shtmlGrüße
Thomas
-
-