Je dois changer la couleur d'arrière-plan de l'élément div à chaque fois que je recharge la page. Et je veux le changer avec deux couleurs qui ne seront pas répétées après le rechargement. C'est le code avec interrupteur aléatoire de deux couleurs:

var bgcolorlist=new Array("#BAF3C3", "#c3baf3")

$("#datetime").css("backgroundcolor",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);

Comment changer les couleurs sans les répéter?

0
Hristian Yordanov 17 avril 2018 à 10:11

3 réponses

Meilleure réponse

Comme indiqué dans les articles précédents, vous devrez enregistrer la dernière couleur utilisée. Vous pouvez utiliser des cookies ou le stockage local comme dans ce violon (sur stackoverflow, le stockage local dans les extraits n'est pas possible)

https://jsfiddle.net/zh07xfu0/

var bgcolorlist = new Array("#BAF3C3", "#c3baf3")
var index = localStorage.getItem("color") == 1 ? 0 : 1;
$("body").css("background-color", bgcolorlist[index]);
localStorage.setItem("color", index);
1
Joschi 17 avril 2018 à 07:32

Vous devez utiliser background au lieu de backgroundcolor comme ceci:

var bgcolorlist=new Array("#BAF3C3", "#c3baf3")

$("#datetime").css("background",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='datetime'>Some content </div>

backgroundcolor n'est pas une propriété css valide. Pour vérifier le caractère aléatoire de la couleur d'arrière-plan, cliquez plusieurs fois sur Run code snippet. Vous verrez que la couleur d'arrière-plan est modifiée au hasard.

Vous pouvez également utiliser la propriété background-color css comme,

var bgcolorlist=new Array("#BAF3C3", "#c3baf3")

$("#datetime").css("background-color",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='datetime'>Some content </div>

Pour un comportement non répétitif, vous pouvez utiliser localStorage pour enregistrer la valeur d'index du bgcolorlist que vous pouvez obtenir à chaque chargement de page et ignorer cette valeur d'index au moment de l'application de la couleur d'arrière-plan.

0
Ankit Agarwal 17 avril 2018 à 07:16

Vous pouvez simplement basculer en fonction du nombre d'entrées d'historique:

 const backgroundColor = history.length % 2 ? "#BAF3C3": "#c3baf3"

Ou comme Viktor l'a souligné, il suffit de stocker un petit drapeau dans le stockage local:

 let backgroundColor = "#BAF3C3";

 if(localStorage.changeBackground) {
   localStorage.changeBackground = ""
 } else {
   localStorage.changeBackground = "1"
   backgroundColor = "#c3baf3"
}
2
Jonas Wilms 17 avril 2018 à 07:24