Rastgele Renkler tercihinize göre

Question

Fikir: Bir mağaza sistemini simüle etmeye çalışıyorum. Kullanıcılar, öğelerin üzerine tıklayarak, bunun gibi bir şeyle ilgilendiğini ve bir dahaki sefere web sitesini ziyaret ettiğinde daha çok beğenildiğini gösterir. Sadece benzer şeyler satın almak için benzer şeyler elde etmek istiyorum, ama renkler ile. Rastgele renkler elde edersiniz. Eğer kırmızı renkleri seviyorsanız, rasgele olanlar elde edersiniz ama normalden daha fazla kırmızıdır. Teorik olarak şu ana kadar:

Pratik olarak başlangıç ​​değerleri 1.0 ile r, g ve b için çerezler yaptım. Renklerden birine her tıklandığında, değer +0.1 artar ve diğerleri de -0.1 düşer. Ama sayıları nasıl hesaba katılabilir?

Bu benim defa JavaScript: Ben senin sorunun hakkın var eğer tamamen emin değilim

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

, ama bir yaklaşım, ilgili çerez değerleri ile rastgele değerler çoğalmaya olabilir.

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

Bu, elbette, çok temel bir çözümün ve optimal teslim etmez edilir:

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

, biz değerleri 0 ve 255 arasında kalmak emin olmalıyız taşmaları (ve underflows) önlemek için Sonuçlar. Aslında bunu denemedim, ama sanırım birkaç çalışmadan sonra "daha iyi" olacak.