偏爱的随机颜色 [英] Random Colors with preference

问题描述

这个想法: 我正在尝试模拟商店系统.通过单击项目，用户表明他对诸如此类的东西感兴趣，并且在他下次访问该网站时越来越喜欢它.我想实现类似的目标，只是没有东西要买，而是要有颜色.您会得到随机的颜色.如果您喜欢"红色，则会得到随机的颜色，但比平常的红色更多.

The idea: I am trying to simulate a shop system. By clicking on items the users shows that he is interested in stuff like that and gets more like it the next time he visits the website. I want to achieve something similar only without things to buy, but with colors. You get random colors. If you 'like' red colors you get random ones but more red than usual.

到目前为止，在理论上. 实际上，我为r，g和b制作了起始值为1.0的cookie.每次单击其中一种颜色时，值将增加+0.1，而其他颜色将下降-0.1. 但是如何考虑数字呢?

So far in theory. Practically I made cookies for r,g and b with the starting values 1.0. Each time one of the colors is clicked the value rises +0.1 and the others go down -0.1. But how can take the numbers into account?

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

This is my Javascript so far:

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值相乘.

I'm not totally sure if I got your problem right, but one approach might be to multiply the random values with the respective cookie values.

// 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之间:

To prevent overflows (and underflows), we have to make sure the values stay between 0 and 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));

当然，这是一个非常基本的解决方案，不会带来最佳结果.我实际上还没有尝试过，但是我猜想它会按预期运行后会变得更好".

This is, of course, a very basic solution and does not deliver optimal results. I have not actually tried it out, but I guess it will get "better" after a few runs, just as intended.

这篇关于偏爱的随机颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！