Màu ngẫu nhiên với tùy chọn

Question

Ý tưởng: Tôi đang cố gắng mô phỏng hệ thống cửa hàng. Bằng cách nhấp vào các mục người dùng cho thấy rằng anh ấy quan tâm đến nội dung như vậy và trở nên giống như nó trong lần tiếp theo anh ấy truy cập trang web. Tôi muốn đạt được một cái gì đó tương tự mà không có những thứ để mua, nhưng với màu sắc. Bạn nhận được màu sắc ngẫu nhiên. Nếu bạn thích màu đỏ, bạn có màu ngẫu nhiên nhưng màu đỏ hơn bình thường.

Cho đến nay về lý thuyết. Thực tế tôi đã tạo cookie cho r, g và b với giá trị bắt đầu 1.0. Mỗi khi một trong các màu được nhấp vào giá trị tăng +0.1 và các giá trị khác giảm xuống -0.1. Nhưng làm cách nào để tính số liệu?

Đây là Javascript của tôi cho đến nay:

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

Tôi không hoàn toàn chắc chắn nếu tôi có đúng vấn đề của bạn, nhưng có một cách tiếp cận có thể là để nhân lên các giá trị ngẫu nhiên với giá trị cookie tương ứng.

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

Để ngăn chặn tràn (và underflows), chúng ta phải đảm bảo các giá trị ở giữa 0 và 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)); 

này, tất nhiên, một giải pháp rất cơ bản và không cung cấp tối ưu các kết quả. Tôi đã không thực sự thử nó ra, nhưng tôi đoán nó sẽ nhận được "tốt hơn" sau một vài lần chạy, đúng như dự định.