背景色とノイズをランダム化する方法

ページを読み込むたびに背景色をランダム化する基本的なランディングページを作成しようとしています。また、svgアイコンをクリックするたびに変更されます。背景色とノイズをランダム化する方法

これまでのところうまくいきましたが、アイコンの色を白くするのではなくランダムにすることは可能ですか？私は問題をjavascriptにsvgの色のプロパティを統合しています。

$(function() { 
 

 
    var randomColor = Math.floor(Math.random() * 16777215).toString(16); 
 

 
    $("body").css({ 
 

 
    backgroundColor: '#' + randomColor 
 

 
    }); 
 

 
    $("#colorcode").text("#" + randomColor); 
 

 
}); 
 

 
var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; 
 
var rand = function() { 
 
    return Math.floor(Math.random() * 6); 
 
}; 
 
var randomColor = function() { 
 
    var r = safeColors[rand()]; 
 
    var g = safeColors[rand()]; 
 
    var b = safeColors[rand()]; 
 
    return "#" + r + g + b; 
 
}; 
 

 
$("body").css({ 
 

 
    backgroundColor: '#' + randomColor 
 

 
}); 
 

 
$(document).ready(function() { 
 
    $('#Layer_1').click(function() { 
 
    $('body').each(function() { 
 
     $(this).css('background', randomColor()); 
 
    }); 
 
    }); 
 
});

.cls-1 { 
 
    fill: #fff; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
 
</script> 
 

 
<div style="width:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px; cursor: pointer"> 
 
    <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
 
    <title>Artboard 1</title> 
 
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> 
 
    </svg>

あなたの助けに感謝を：ここで私が現在使用しているコードです。私はJavascriptにはかなり新しいので、これは私のための少しの学習曲線です。

出典

2016-09-29 Jacob

確かに、Jqueryも簡素化することができます。

はちょうどあなたが背景と同じあなたのSVGアイコンをターゲットにすることができますが、あなたは「塗りつぶし」を使用する必要がフィルof.cls-1

var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; 
 
var rand = function() { 
 
    return Math.floor(Math.random() * 6); 
 
}; 
 
var randomColor = function() { 
 
    var r = safeColors[rand()]; 
 
    var g = safeColors[rand()]; 
 
    var b = safeColors[rand()]; 
 
    return "#" + r + g + b; 
 
}; 
 

 
$(document).ready(function() { 
 
    $('.cls-1').css('fill', randomColor()); 
 
    $('body').css('background', randomColor()); 
 
    $('#Layer_1').click(function() { 
 
    $('.cls-1').css('fill', randomColor()); 
 
    $('body').css('background', randomColor()); 
 
    }); 
 
});

.cross { 
 
    width: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin: -200px 0 0 -200px; 
 
    cursor: pointer; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
 
</script> 
 

 
<div class="cross"> 
 
    <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
 
    <title>Artboard 1</title> 
 
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> 
 
    </svg>

出典

2016-09-29 09:35:35

ありがとう、これは私が後にしたものです！これはリフレッシュ時とクリック時にランダム化されますか？ – Jacob

毎晩違う –

パーフェクト、もう一度ありがとう。 – Jacob

-1

最小のコード！お楽しみください！

function changecolor() { 
 
     var colors = ["red", "blue", "yellow"]; 
 
     Shuffle(colors); 
 
     document.body.style.backgroundColor = colors[0]; 
 
    } 
 
    function Shuffle(o) { 
 
    \t for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
 
    \t return o; 
 
    };

<body onload="changecolor()"> 
 
    <h1>Hello World!</h1> 
 
</body>

出典

2016-09-29 09:30:10 SAM

あなたは（あなたのケースでは、polygon）SVG要素にfill CSSプロパティを適用することにより、

$('#Layer_1 polygon').css('fill', randomColor());

$(function() { 
 
    var randomColor = Math.floor(Math.random() * 16777215).toString(16); 
 
    $("body").css({ 
 
    backgroundColor: '#' + randomColor 
 
    }); 
 
    $("#colorcode").text("#" + randomColor); 
 
}); 
 

 
var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; 
 
var rand = function() { 
 
    return Math.floor(Math.random() * 6); 
 
}; 
 

 
var randomColor = function() { 
 
    var r = safeColors[rand()]; 
 
    var g = safeColors[rand()]; 
 
    var b = safeColors[rand()]; 
 
    return "#" + r + g + b; 
 
}; 
 

 
$("body").css({ 
 
    backgroundColor: '#' + randomColor 
 
}); 
 

 
$(document).ready(function() { 
 
    $('#Layer_1').click(function() { 
 
     $('body').css('background', randomColor()); 
 
     $('#Layer_1 polygon').css('fill', randomColor()); 
 
    }); 
 
});

#svgdiv { 
 
    width: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin: -200px 0 0 -200px; 
 
    cursor: pointer 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="svgdiv"> 
 
    <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
 
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> 
 
    </svg> 
 
</div>

をSVGの色を変更することができます

出典

2016-09-29 09:30:25 Aziz

を変更する必要はなく、 "背景色" これに置き換えてみてください：

$(document).ready(function() { 
    $(".cls-1").css("fill",randomColor()) 
    $('#Layer_1').click(function() { 
     $('body').each(function() { 
     $(this).css('background',randomColor()); 
     $(".cls-1").css("fill",randomColor()) 
     }); 
    }); 
    });

出典

2016-09-29 09:41:15 mondersky

背景色とノイズをランダム化する方法

答えて

関連する問題