Zeitverzögerung in der Ausgabe

  • Ich möchte zwischen dem farbigen Anzeigen von Zellen einer Tabellen eine Zeitverzögerung damit man sich die angezeigten Tabellen merken kann.


    in dem folgenden Code kommt es zu keiner Zeitverzögerung. Es werden alle ausgewählten Tabellen gleichzeitig angezeigt.


    Und obwohl der Wert für anzahlFelder gleich 4 ist werden nur 3 Felder angezeigt und nicht 4.


    Dank vorab und eine schöne Woche


    Joachim



    function VorgabeZahlErmitteln(z,s){


    for (var i = 0; i <= anzahlFelder-1; i++)


    {
    var zindex=random(z-1);
    var sindex=random(s-1);


    indexZelleVorgabe[i]=zindex;
    indexSpalteVorgabe[i]=sindex;
    var zw= (zindex*anzahlSpalten)+sindex;


    setTimeout( bringColor(zw), 1000);
    }


    }


    function bringColor(x){


    var ind=x;
    var tds=document.getElementsByTagName('td');
    tds[ind].style.backgroundColor="#00FF00";
    }

  • Ich habe es mir noch nicht im Ganzen angesehen, aber vielleicht hilft dir das:


    • for (var i = 0; i <= anzahlFelder-1; i++)

    • {

    • var zindex=random(z-1);

    • var sindex=random(s-1);

    • indexZelleVorgabe[ i ]=zindex;

    • indexSpalteVorgabe[ i ]=sindex;

    • var zw= (zindex*anzahlSpalten)+sindex;

    • setTimeout( bringColor(zw), 1000 * (i + 1));

    • }
  • PS: Ich sehe gerade, dass dies nicht funktionieren wird:

    JavaScript
    1. setTimeout( bringColor(zw), 1000);


    Ruft die Funktion bringColor sofort auf und übergibt den Rückgabewert an setTimeout(). Richtig wäre:

    JavaScript
    1. setTimeout(function(zwzw) {return function() {bringColor(zwzw);}}(zw), 1000 * (i + 1));
  • Das Staement


    setTimeout(function(zwzw) {return function() {bringColor(zwzw);}}(zw), 1000 * (i + 1));


    funktioniert ( Danke Sempervivum)


    Die ausgesuchten Zellen erhalten die neue Farbe. Soweit sehr schön.


    Jetzt möchte ich, dass die einzelne Zelle ein Sekunde lang die neue Farbe hat und dann wieder die ursprünglichre Farbe erhält.


    Ich habe gedacht ich könnte es machen mit


    setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));
    setTimeout(function(zwzw) {return function() {bringColorAlt(zwzw);}}(zw), 1000 * (i + 1));


    Das funktioniert nicht weil die erste Timeout Anweisung mit bringColorNeu übersprungen wird??????
    Es wird sofort die Funktion bringColorAlt() aktiv.


    Optimal wäre es für mein Vorhaben.


    Es wird mit Verzögerung die neue Farbe in die einzelne Zelle gebracht.
    also
    setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));


    dann blinkt die Zelle:


    mittels Anzeigen


    neue Farbe
    alte Farbe
    neue Farbe
    alte Farbe
    neue Farbe
    alte Farbe


    Also eine Schleife mit alter/neuerFarbe.





    und dann Dann


    Dann


    Verstehe ich nicht. Ich dachte es wird sequentiell abgearbeitet. Wie ist das zu ändern?

  • Damit dies funktioniert:
    setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));
    setTimeout(function(zwzw) {return function() {bringColorAlt(zwzw);}}(zw), 1000 * (i + 1));


    musst Du die Zeiten staffeln, denn der zweite Timeout wird ja zur selben Zeit wie der erste gestartet und nicht erst nach Ablauf des ersten. So sollte es funktionieren:
    setTimeout(function(zwzw) {return function() {bringColorNeu(zwzw);}}(zw), 1000 * (i + 1));
    setTimeout(function(zwzw) {return function() {bringColorAlt(zwzw);}}(zw), 1000 * (i + 1) + 1000);


    Zum Blinken schreibe ich später. Du kannst dich schon mal über CSS-Animationen informieren.

  • Nun zum Blinken:


    CSS für die Tabellenzelle:



    td.blink {
    background-color: lightgrey;
    animation: aniblink 2s infinite;
    }
    @keyframes aniblink {
    0% {
    background-color: lightgrey;
    }
    20% {
    background-color: red;
    }
    50% {
    background-color: red;
    }
    70% {
    background-color: lightgrey;
    }
    100% {
    background-color: lightgrey;
    }
    }


    Das Blinken startest Du, indem Du die Klasse blink bei der betr. Zelle setzt:



    function VorgabeZahlErmitteln(z,s){


    for (var i = 0; i <= anzahlFelder-1; i++) {} {
    var zindex=random(z-1);
    var sindex=random(s-1);


    indexZelleVorgabe[ i ] = zindex;
    indexSpalteVorgabe[ i ] = sindex;
    var zw= (zindex*anzahlSpalten)+sindex;


    setTimeout(function (zwzw) {
    return function () {
    var tds = document.getElementsByTagName('td');
    tds[zwzw].className = "blink";
    }
    }(zw), 1000 * (i + 1));
    }
    }


    Und stoppen kannst Du das Blinken, wenn Du diese Klasse wieder löschst.

  • Ich habe dazu mal was mit setInterval() gemacht. Mit etwas Phantasie stehen dem Geblinke ganz neue Dimensionen offen :)


  • Ich hatte mich für die setInterval Lösung entschieden. Ist einleuchtend und leicht manipulierbar. Dachte ich . Ich bekomme es nicht hin.



    1.) Nur wenn ich das alert Statement in der Funktion habe bringt er die Farbe in die Zelle.


    2.) Der Code funktioniert auch nur dann für i = 1 . Die Schleife wird nicht durchlaufen.


    function VorgabeZahlErmitteln(z,s)
    {
    var blinkFarben=new Array('blue','white','red','white','red', 'white');
    var myBlink;


    for (var i = 0; i <= anzahlFelder-1; i++)


    {
    var blinkFarbe=0;


    var zindex=random(z-1);
    var sindex=random(s-1);


    indexZelleVorgabe[i]=zindex;
    indexSpalteVorgabe[i]=sindex;
    var zw= (zindex*anzahlSpalten)+sindex;


    myBlink=setInterval(function(){doBlink(zw);},300);



    function doBlink(zwzw)
    {


    var ind=zwzw;
    var blinkende=document.getElementsByTagName('td');
    blinkende[ind].style.backgroundColor=blinkFarben[blinkFarbe];
    blinkFarbe++;
    alert(blinkFarbe);
    if(blinkFarbe>5)
    {
    clearInterval(myBlink);
    }
    }
    }
    }
    l

  • Jetzt wird's bunt! :)


  • Ich möchte auf die"einfache" vorherige Lösungsidee zurückkommen.


    Warum wird die Farbsequenz bei anzahlFelder = 0 in der If Abfrage einmal gebracht, bei anzahlFelder > 0 passiert nichts? Ich möchte die Farbsequenz lt array blinkFarben anzahlFelder ot wiederholen


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    td{font-size:40px; padding:4px 10px;}
    </style>
    <script>


    var blinkFarben=new Array('red','white','red','white','red','white','red','white');
    var anzahlFelder = 1;


    for (var i = 0; i <=anzahlFelder; i++)


    {

    var blinkFarbe=0;


    var myBlink=setInterval(function(){doBlink();},300);



    }
    function doBlink()
    {
    var blinkende=document.getElementById('blinker');
    blinkende.style.backgroundColor=blinkFarben[blinkFarbe];
    blinkFarbe++;
    if(blinkFarbe==blinkFarben.length)
    {
    stopBlink();
    }
    }


    function stopBlink()
    {
    clearInterval(myBlink);
    }


    </script>
    </head>
    <body>


    <table border="1">
    <tr>
    <td> A </td><td> B </td><td> C </td>
    </tr>
    <tr>
    <td> D </td><td id="blinker"> E </td><td> F </td>
    </tr>
    <tr>
    <td> G </td><td> H </td><td> I </td>
    </tr>
    </table>
    <br>


    </body>
    </html>

  • Mein HERZLICHEN Dank an Jav und Semper. Ich habe viel gelernt. Für Interessierte der Code, der genau das bringt was ich möchte.




    <!DOCTYPE html>
    <html>
    <head>
    <style>
    td{font-size:40px; padding:4px 10px;}
    </style>
    <script>
    var blinkColors = new Array('red', 'white','red', 'white' );
    var zw= new Array(2,3,7,8);
    var selectCell = 5;
    var blinkColor = 0;
    var iterator = 0;


    var myBlink = setInterval(function() {
    doBlink();
    }, 1300);


    function doBlink() {


    var blinkCell = document.getElementById('blinker' +zw[iterator] );


    blinkCell.style.backgroundColor = blinkColors[blinkColor];
    blinkColor++;


    if (blinkColor == blinkColors.length) {
    blinkColor = 0;
    blinkCell.style.backgroundColor = "transparent";
    iterator++;


    if (iterator == selectCell)
    clearInterval(myBlink);
    else
    doBlink(zw[iterator]);
    }


    }
    function random(max)
    {
    return Math.floor((Math.random() *max) + 1);
    }
    </script>
    </head>
    <body>


    <table border="1">
    <tr>
    <td id="blinker0"> A </td><td id="blinker1"> B </td><td id = "blinker2"> C </td>
    </tr>
    <tr>
    <td id="blinker3"> D </td><td id="blinker4"> E </td><td id = "blinker5"> F </td>
    </tr>
    <tr>
    <td id="blinker6"> G </td><td id="blinker7"> H </td><td id = "blinker8"> I </td>
    </tr>
    </table>
    <br>


    </body>
    </html>