Colori casuali con preferenza

Question

L'idea: Sto provando a simulare un sistema di negozio. Facendo clic sugli elementi, gli utenti dimostrano di essere interessato a cose del genere e ne assomiglia di più la volta successiva che visita il sito. Voglio raggiungere qualcosa di simile solo senza cose da comprare, ma con colori. Ottieni colori casuali. Se ti piacciono i colori rossi, ottieni quelli casuali ma più rossi del solito.

Finora in teoria. Praticamente ho creato i cookie per r, geeb con i valori iniziali 1.0. Ogni volta che si fa clic su uno dei colori, il valore sale +0,1 e gli altri scendono -0,1. Ma come si possono prendere in considerazione i numeri?

Questo è il mio Javascript finora:

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

io non sono del tutto sicuro se ho ottenuto il vostro problema a destra, ma l'approccio potrebbe essere quello di moltiplicare i valori casuali con i rispettivi valori dei cookie.

// 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; 

Per evitare overflow (e underflow), dobbiamo assicurarsi che i valori di soggiorno tra 0 e 255:

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

Questo è, naturalmente, una soluzione molto semplice e non consegna ottimale risultati. In realtà non l'ho ancora provato, ma immagino che diventerà "migliore" dopo alcune sessioni, proprio come previsto.