nicht angemeldet
Zuffalsanimation
JürgenBHallo,
ich will eine etwas komplexe Javascript Funktion fetrig stellen, bräuchte aber hilfe. Ich will zufällig wiederholte GIFs in einem festen Zeitramen in zufälligen zeit abständen basteln und bin soweit gekommen.
<html>
<head>
<script language="javaScript" type="text/javascript">
var anim1 = document.all.pic.innerHTML = '<img src="1.bmp" height="340" width="300" alt="">';
var anim2 = document.all.pic.innerHTML = '<img src="2.bmp" height="340" width="300" alt="">';
var anim3 = document.all.pic.innerHTML = '<img src="3.bmp" height="340" width="300" alt="">';
var anim4 = document.all.pic.innerHTML = '<img src="4.bmp" height="340" width="300" alt="">';
var anim5 = document.all.pic.innerHTML = '<img src="5.bmp" height="340" width="300" alt="">';
var anim6 = document.all.pic.innerHTML = '<img src="6.bmp" height="340" width="300" alt="">';
var anim7 = document.all.pic.innerHTML = '<img src="7.bmp" height="340" width="300" alt="">';
var anim8 = document.all.pic.innerHTML = '<img src="8.bmp" height="340" width="300" alt="">';
function animation() {
var rnd = Math.round(Math.random() * 8); // Zufalls integer (Bild)
if (rnd == 1) {
document.all.pic.innerHTML = 'anim1'; };
if (rnd == 2) {
document.all.pic.innerHTML = 'anim2'; };
if (rnd == 3) {
document.all.pic.innerHTML = 'anim3'; };
if (rnd == 4) {
document.all.pic.innerHTML = 'anim4'; };
if (rnd == 5) {
document.all.pic.innerHTML = 'anim5'; };
if (rnd == 6) {
document.all.pic.innerHTML = 'anim6'; };
if (rnd == 7) {
document.all.pic.innerHTML = 'anim7'; };
if (rnd == 8) {
document.all.pic.innerHTML = 'anim8';};
window.setTimeout("animation()", rndT);
};
</script>
</head>
<body onLoad="animation()">
<div id="pic"></div>
</body>
</html>
Ein zufalls bild und zufallige Zeit um wiederholt zu werden. leider zeit jeder Bowser mir nix an. kann mir jemand helfen? ich würde mich freuen wenn einer mit eine Nachricht mit quellcode mailt.
danke im voraus
MFG
Mathias Beyer
-
Hallo,
Da stechen gleich mehrere Fehler ins Auge, die wichtigsten sind:
1. document.all kennen nicht alle Browser
2.Math.round(Math.random() * 8);ist keine gute Zufallsfunktion (nicht gleichverteilt). Es gibt bessere.
3. Mitdocument.all.pic.innerHTML = 'anim1'; };schreibst du nur den String 'anim1' ins HTML. Es muss heißen:document.all.pic.innerHTML = anim1; };
4. Inwindow.setTimeout("animation()", rndT);ist rndT nicht definiert.Gruß, Don P
-
Hallo Don,
besten Dank ist mir auch schon aufgefallen als ich weiter daran rumgebastelt habe. Ich hab jetzt zufalls bildwechsel und zufalls zeit bis zum bild wechsel.ich habe jetzt noch das problem eine feste Zeit zu den Zufallszeiten für den bildwechsel bei einem animierten GIF
kanst du mir da helfen?
Doch ich danke dir für den rat mit der komplikation der Browser
MFGMathias
-
-
Hallo Mathias,
ich würde das etwas anders anpacken:
ins HTML kommt das Startbild, das img-Tag erhält eine ID, über die es dann manipuliert werden kann:
<div><img id="zufbild" src="1.bmp"></div>Ich würde übrigens nie Bilder im bmp-Format für das Internet verwenden. Wandle sie in gif, png oder jpeg um.
Im Javascript benötigst du dann ein Array mit den Bildnamen:
var bilder = new Array() ; bilder[0] = "1.bmp"; bilder[1] = "2.bmp"; ... bilder[7] = "8.bmp";dann benötigst du die Bildwechselfunktion, die sich nach dem Bildwechsel nach einer zufälligen Zeit wieder selbst aufruft. Diese Funktion berechnet zwei Zufallszahlen für das Bild und für die Zeit bis zum nächsten Bildwechsel:
var bildwechsel = function() { var zuf_bild = [ref:self812;javascript/objekte/math.htm@title=Math].floor(Math.random()*bilder.length); var zuf_zeit = Math.floor(Math.random()*10000); // Maximale Zeit: 10 Sekunden document.[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=getElemenById]("zufbild").[ref:self812;javascript/objekte/images.htm#src@title=src] = bilder[zuf_bild]; window[ref:self812;javascript/objekte/window.htm#set_timeout@title=.setTimeout]("bildwechsel()",zuf_zeit); }Diese Funktion muss dann nach dem Laden des Dokuments zu ersten Mal aufgerufen werden:
window.onload = bildwechsel;
Das ganze ist nicht getestet, Tippfehler sind möglich, prüfe es also sorgfältig, lies die Doku zu den verwendeten Methoden nach und frag nach, wenn du etwas nicht verstehst.
http://de.selfhtml.org/javascript/objekte/images.htm#src@title=Hier findest du übrigens ein Beispiel zum Bildwechsler.
Gruß, Jürgen
-
Hallo Jürgen,
deine Nachricht was sehr lehrreich. leider bin ich nicht so fit wie du in sachen Javascript. Ich brauche sehr viel hilfe für das programmieren von javascript. deshalb haben meine scripte viel fleisch und sie aus deinersich umständlich.
Ich hab es jetzt geschaft 8 zufällige bildwechsel und eine zeit variable für den bildwechsel.
nun ist mir aufgefallen das der zufalls generator
var rndT = Math.round(Math.random() * 5000);in millisekunden arbeitet. ich möchte gerne sekunden abgerunden haben doch ich weis nicht wie das funktioniert. ich hab in SelfHTML gesucht und bvin nich fündig eworden. kanst du mir helfen?
GrüßeMathias
-
Hallo Mathias,
nun ist mir aufgefallen das der zufalls generator
var rndT = Math.round(Math.random() * 5000);in millisekunden arbeitet. ich möchte gerne sekunden abgerunden haben doch ich weis nicht wie das funktioniert.nicht der Zufallsgenerator sondern setTimeot arbeitet mit Millisekunden.
Wenn du Zufallszahlen auf ganze 1000er runden möchtest, gehst du so vor:
var zuf = Math.random(); // Zahl zwischen 0 und 0.99999... var zufsek = zuf * maxsek ; // Zahl zwischen 0 und 0.99999... * maxsek var zufsek_i = Math.floor(zufsek); // Ganze Zahl zwischen 0 und maxsek-1 var zufmsek = zufsek * 1000; // Glatter 1000eroder am Stück:
var zufmsek = Math.floor(Math.random()*maxsek)*1000 ;Mehr hierzu und vor allem, warum ich floor und nicht round genommen habe, findest du hier: http://aktuell.de.selfhtml.org/artikel/javascript/zufallszahlen/
Gruß, Jürgen
-
Halo Jürgen,
herzlichen Dank. mit floor und diesen jenen Attributet. Ich wusste nicht wie ich einzetzen soll. viel Dank nomals.
MFGMathias
-
-
-