Kontinuierlich Schleife Farben auf div mit Javascript auf MouseEnter-

Question

Ich habe ein div auf einer Seite, und ich würde kontinuierlich Zyklus durch eine Reihe von Farben mit Javascript mögen.

Ich habe eine Reihe von Artikeln über die Stack-Überlauf über Endlosschleifen gesehen Informationen mit Arrays und Javascript zeigen doch habe ich habe Mühe versuchen, es in mein eigenes Projekt zu realisieren.

Mein HTML:

<div id="box" style="background:grey;" onmouseenter="change()"></div> 

und in der Nähe JS Lösung, die ich finden kann:

var change = function() { 
    colors = ['#00b0e2', '#e3144e', '#15e39b']; 
    count = -1; 
    return function() { 
     return colors[++count % colors.length]; 
    } 
    document.getElementById('box').style.background = colors; // or should this be **colors[]**? 
} 

Ich verstehe, was bis zur Rückkehr Funktion geschieht, aber dann Schwierigkeiten Ich habe Verständnis, wie zu injizieren die farbe in den html?

Jede Hilfe oder Tipps wäre dankbar, danke.

Answer 1

Ich denke, Sie sind sehr nahe, aber ein paar wichtige Dinge fehlen.

Zum einen, wenn Sie onmouseover="change()" sagen, dass bedeutet, dass es jedes Mal change() die Mouseover läuft läuft addEventListener(change()) im Gegensatz zu verwenden, die die Funktion von change als Event-Handler zurück laufen würde.

Zweitens um das Element zu ändern, alles, was Sie tun müssen, ist ein Griff auf das Element und legen Sie den Hintergrund.

Der folgende Code macht das, was ich zu tun versuche, aber einfacher. Ich hoffe, es hilft.

// setup our colors and state once 
 
colors = ['#00b0e2', '#e3144e', '#15e39b']; 
 
count = -1; 
 

 
var change = function(element) { 
 
    element.style.background = colors[++count % colors.length]; 
 
}

<!-- Pass in the element when creating the change listener --> 
 
<div id="box" style="background:grey;" onmouseenter="change(this)"> 
 
    Give our box some contents so we can see it. 
 
</div>

Erläuterung:

das grundlegende Konzept hinter der Schleife ist, dass wir eine count haben, die uns colors[count] sagt gerade aktiv ist.

Wenn ein mouseover passiert, passieren drei Dinge in der einen Zeile.

• ++count: Dies fügt 1-count, aber im Gegensatz zu count++, tut sie dies, bevor der Wert verwendet wird. Was bedeutet, dass zum ersten Mal ein mouseover auftritt, ist der Wert von count0

• count % colors.length: Das uns auf die erste Farbe nur lässt umschlingen, sobald es die letzte Farbe getroffen hat. Der Operator % (Modul) gibt den Rest an. a % b wird den Rest nach dem Teilen a/b zurückgeben.Wenn count = 0, count % 3 Ausbeuten 0, aber wenn count = 4, count % 3 Ausbeuten 1. Sie können mehr über diese und andere arithmetische Operatoren auf MDN

• element.style.background = colors[...] lesen: Hier werden das background CSS-Attribut auf die Farbe, die wir im letzten Schritt ausgewählt.

so alles zusammen zu stellen, ist hier die change Funktion in 3 Zeilen ausgebrochen.

var change = function(element){ 
    count++; //increment count before using it. 
    var our_color = count % colors.length; // wrap properly 
    element.style.background = colors[our_color]; 
}