随喜好的随机颜色

Question

想法：我正在尝试模拟商店系统。通过点击项目，用户表明他对类似的东西感兴趣，并且在他下次访问该网站时会更喜欢它。我想实现类似的东西，只是没有东西可买，但有颜色。你得到随机颜色。如果你 'like' 红色，你会得到随机的颜色，但比平时更红。

理论上到目前为止。实际上，我为 r、g 和 b 制作了初始值 1.0 的 cookie。每次单击其中一种颜色时，该值上升 +0.1，而其他颜色下降 -0.1。但是怎么把数字算进去呢？

到目前为止，这是我的 Javascript：

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

我不确定我是否解决了你的问题，但一种方法可能是将随机值与相应的 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;

为了防止溢出（和下溢），我们必须确保值保持在 0 和 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));

当然，这是一个非常基本的解决方案，并不能提供最佳结果。我还没有真正尝试过，但我想它会在运行几次后得到 "better"，正如预期的那样。

随喜好的随机颜色

Random Colors with preference

javascript

random

rgb