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?
3 réponses
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);
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.
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"
}