随机颜色与偏好

Random Colors with preference

本文关键字：颜色 随机      更新时间：2023-09-26

想法：我正在尝试模拟一个商店系统。通过点击项目，用户表明他对这样的东西感兴趣，并在下次访问网站时变得更喜欢。我只想在不买东西的情况下，用颜色来实现类似的目标。你会得到随机的颜色。如果你"喜欢"红色，你会得到随机的，但比平时更红。

理论上到目前为止。实际上，我为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 "";
}

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

当然，这是一个非常基本的解决方案，不会产生最佳结果。我还没有真正尝试过，但我想它会在几次跑步后变得"更好"，正如预期的那样。

相关文章：