Wie ändere ich die Hintergrundfarbe mit Javascript

Ich habe erwartet, dass dieser Code ausgeführt wird, hat aber nicht funktioniert. Kann mir bitte jemand sagen, was mit diesem Code falsch ist ... DankeWie ändere ich die Hintergrundfarbe mit Javascript

<script> 

var color = ["red","green","pink"]; 

function changeBackground(){ 

    for(var i=0; i<color.length; i++){ 
     document.body.style.background = color[i]; 

     if(i == color.length){ 
      i = 0; 
     } 
    } 
} 

setInterval(changeBackground, 1000); 

</script>

Quelle

2016-04-21 surazzarus

es ist, wenn der Code ausgeführt wird der Körper noch nicht geladen, so haben Sie Ihren Code nach Körper oder führen Sie onload-Ereignis oder jquery $ (Dokument) .ready (function() {}); –

Was der oben genannte Code tut, ist: für jede Sekunde, die Funktion changeBackground, laufen die Schleife durch und ändern Sie den Hintergrund dreimal (schnell) .

sollte der folgende Code arbeiten:

<script> 

var color = ["red","green","pink"]; 
var index = 0; 

function changeBackground(){ 
    document.body.style.background = color[index]; 
    index = index + 1; 
    if(index == color.length){ 
     index = 0; 
    } 
} 
setInterval(changeBackground, 1000); 
</script>

Quelle

2016-04-21 00:10:21 ryan

-1

Mit jQuery, ist es immer einfacher für DOM-Selektor

$(document).ready(function(){ 
 
    var color = ["red","green","pink"]; 
 

 
    function changeBackground(){ 
 

 
     for(var i=0; i<color.length; i++){ 
 
      $('body').css('background-color', color[i]); 
 

 
      if(i == color.length){ 
 
       i = 0; 
 
      } 
 
     } 
 
    } 
 

 
    setInterval(changeBackground, 1000); 
 
});

<html> 
 
    <title>Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 
<body> 
 

 
</body> 
 
</html>

Quelle

2016-04-21 00:12:55 Kelvin

Ich nehme an, Sie erwarten, Ihren Code zu verursachen Der Hintergrund dreht sich von Rot zu Grün, zu Rosa, macht jede Sekunde einen Schritt und kehrt dann zu Pink zurück. Aber was tatsächlich passiert ist, dass es rosa wird und dann dort bleibt, richtig?

Das liegt daran, dass Sie ein kleines Missverständnis darüber haben, wie setInterval funktioniert. Lassen Sie uns zunächst einen Blick auf Ihre changeBackground Funktion in Isolation:

var color = ["red","green","pink"]; 
function changeBackground() { 
    for(var i = 0; i < color.length; i++){ 
    document.body.style.background = color[i]; 
    if (i == color.length) { 
     i = 0; 
    } 
    } 
}

Ein paar Dinge über diese zu beachten: Erstens, Ihre bedingte if (i == color.length) ist nie zu true lösen gehen. Das liegt daran, dass die Schleife nur ausgeführt wird, wenn i < color.length.

Zweitens wird diese Schleife sehr schnell ausgeführt werden. So schnell, dass es deine Hintergrundfarbe auf Rot setzt, dann auf Grün, dann auf Pink, bevor du es bemerkst, also siehst du nur einen rosa Hintergrund. Was genau passiert ist.

Dann rufen Sie diese Funktion einmal pro Sekunde. Aber jedes Mal, wenn du es nennst, macht es genau dasselbe: Es verändert deine Hintergrundfarbe so schnell, dass du es nicht einmal sehen kannst, und lässt es dann pink.

Jedoch! Ich würde nicht empfehlen, dass Sie versuchen, etwas wie die Bedingung zu if (i == color.length - 1) ändern, weil das eine Endlosschleife erstellen und wahrscheinlich Ihren Browser zum Absturz bringen wird. Was Sie wirklich wollen, ist etwas zu nennen, das die Hintergrundfarbe nur einmal ändert und es jedes Mal anders macht.

Quelle

2016-04-21 00:13:14 Hamms

danke, Sie haben meine Frage gelöscht ... hilfreiche Informationen – surazzarus

Wie ändere ich die Hintergrundfarbe mit Javascript

Antwort

Verwandte Themen