2015-11-16 4 views
6

アイデア: 私は店舗システムをシミュレートしようとしています。アイテムをクリックすると、ユーザーはそのようなものに興味があることが示され、次回彼がウェブサイトにアクセスしたときにそれに似ています。私は買うものがなくても似たようなことを達成したいのですが、色が付いています。あなたはランダムな色を取得します。あなたが赤い色が好きなら、ランダムなものを得るが、いつもよりも赤い。好みのランダムな色

これまでのところ、理論的には。 実際には、最初の値1.0でr、g、bのクッキーを作った。色の1つがクリックされるたびに、値は+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 ""; 
} 
+2

あなたの質問に加えて 'Math.round((Math.random()*(255 - 255)+ 255));'これは確実に機能しますか?私にとってはランダムな値に0を掛けたように見えるので、常に「0 + 255」= 255の値になります。 – Hexaholic

+0

あなたの問題をアップします。 Math.round(Math.random()*(255 - 1)+ 1))でなければなりません。 – Trojan

+0

1つの値が(+)0.1で増加すると、2つの値で0.1を引く( - )と言います。これは最終的に負の値を作成します。したがって、最も高い値をチェックし、負の値をサポートするか、またはそれを修正するようにしてください。私はちょうど気づくのを助けることができなかった:) –

答えて

1

、しかし、1つのアプローチは、それぞれのクッキー値でランダムな値を乗算するかもしれません。オーバーフロー(アンダーフロー)を防止するために

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

、我々は値が0255間とどまることを確認する必要があります。

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

これは、もちろん、非常に基本的なソリューションであり、最適な配信しません。結果。私は実際にそれを試したことはありませんが、意図したように、数回実行した後に「より良い」結果を得られると思います。