nicht angemeldet
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 = a
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(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.