Zufällige Farben mit Vorzug

Question

Die Idee: Ich versuche ein Shop-System zu simulieren. Durch Klicken auf Elemente zeigt der Benutzer an, dass er sich für solche Sachen interessiert und dass es ihm beim nächsten Besuch der Website ähnlicher wird. Ich möchte etwas ähnliches nur ohne Dinge zu kaufen, aber mit Farben. Sie erhalten zufällige Farben. Wenn Sie rote Farben "mögen", erhalten Sie zufällige, aber mehr Rot als gewöhnlich.

Bis jetzt in der Theorie. Praktisch habe ich Cookies für r, g und b mit den Startwerten 1.0 gemacht. Jedes Mal, wenn eine der Farben angeklickt wird, steigt der Wert um +0,1 und die anderen um -0,1. Aber wie kann man die Zahlen berücksichtigen?

Das ist mein Javascript so weit:

var r = getCookie("r"); 
var g = getCookie("g"); 
var b = getCookie("b"); 

if (r = ""){ 
    setCookie("r",1.0,365); 
    setCookie("g",1.0,365); 
    setCookie("b",1.0,365); 
} 
init(); 
function init(){ 


    var colorboxes = document.getElementsByClassName("mycolorbox"); 

    [].forEach.call(colorboxes,function(entry){ 


     var sr = Math.round((Math.random() * (255 - 1) + 1)); 
     var sg = Math.round((Math.random() * (255 - 1) + 1)); 
     var sb = Math.round((Math.random() * (255 - 1) + 1)); 

     entry.style.backgroundColor = "rgba("+sr+","+sg+","+sb+",0.8)"; 
    }); 

} 



$(document).click(function(event) { 
    var clickedObj = $(event.target); 

    if (clickedObj[0].className.indexOf("likebox") > -1) { 

     clickedObj[0].style.Color = "red"; 
     var rgb = clickedObj[0].parentNode.style.backgroundColor.match(/\d+/g); 
     console.log(rgb); 
     console.log(clickedObj[0].className); 
     console.log("rot: "+rgb[0]+" gruen: "+rgb[1]+" blau: "+rgb[2]); 

     if (rgb[0] >= rgb[1] && rgb[0] >= rgb[2]) { 
      alert("red"); 
      setCookie("r",r-0.1,365) 
     } else if (rgb[1] >= rgb[0] && rgb[1] >= rgb[2]) { 
      alert("green"); 
      setCookie("g",g-0.1,365) 
     } else if (rgb[2] >= rgb[1] && rgb[2] >= rgb[0]) { 
      alert("blue"); 
      setCookie("b",b-0.1,365) 
     } 

    } 
}); 

function setCookie(cname,cvalue,exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires=" + d.toGMTString(); 
    document.cookie = cname+"="+cvalue+"; "+expires; 
} 

function getCookie(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split('; '); 
    for(var i=0; i<ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1); 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length, c.length); 
     } 
    } 
    return ""; 
} 

Answer 1

ich nicht ganz sicher bin, ob ich das Problem richtig verstanden habe, aber ein Ansatz könnte die Zufallswerte mit den jeweiligen Cookie-Werten zu multiplizieren sein.

// you already have this code for random numbers 
var sr = Math.round((Math.random() * (255 - 1) + 1)); 
var sg = Math.round((Math.random() * (255 - 1) + 1)); 
var sb = Math.round((Math.random() * (255 - 1) + 1)); 

// now let's multiply these values with the user's preferences 
sr *= r; 
sg *= g; 
sb *= b; 

Um überläuft (und Unterschreitungen) zu verhindern, müssen wir die Werte bleiben zwischen 0 und 255 sicher:

sr = Math.max(0, Math.min(255, sr)); 
sg = Math.max(0, Math.min(255, sg)); 
sb = Math.max(0, Math.min(255, sb)); 

eine sehr einfache Lösung Dies ist natürlich, und liefert nicht optimal Ergebnisse. Ich habe es nicht wirklich ausprobiert, aber ich denke, es wird nach ein paar Läufen "besser", genau wie beabsichtigt.