-1

css不透明度の乱数を生成しようとしています。

これは私がこれまでに試したことです。

CSS

.test{
    position : absolute;
    width : 15px;
    height : 15px;
    border-radius:15px;
    background-color : black; 
}​

脚本

$(function() {
    for (var i = 0; i < 300; i++) {
        $("<div>", {
            class: "test",
            css: {
                opacity: randomOpacity
            }
        }).appendTo("body");
    }

    function randomOpacity() {
        var opac = 0;
        opac = Math.random() < 1;
        console.log(opac);
    }

    randomize();
});​

フィドル

4

6 に答える 6

5

フィドルには複数のエラーがあります。

  • あなたはすべて絶対に配置されている300のdivをスポーンしています。それらは互いに積み重なっているため、関係なく黒く表示されます。
  • 実際に関数を呼び出していません（括弧がありません）
  • Math.random（）<1は、数値ではなくTrueを返します。
  • 関数からopacを返していません。
  • 定義されていないrandomize（）を呼び出していました。

修正されたバージョン：http：//jsfiddle.net/RucKd/1/

于 2012-09-22T21:42:32.827 に答える
2

Math.random()0との間の乱数をすでに生成している1ので、次のようになります。

$(function() {
    for (var i = 0; i < 100; i++) {
        $("<div>", {
            class: "test"
        }).css('opacity', Math.random()).appendTo("body");
    }
});

フィドル

編集：私の答えにあなたのループを再挿入し、フィドルから絶対位置を削除しました。より完全なコードレビューについては、@ ChristopheBiocca（+1）の回答をお読みください。

于 2012-09-22T21:38:31.250 に答える
1

JS

 $(function() {

        for (var i = 0; i < 300; i++){
          $("<div>", {
            class : "test",
            css : {
              opacity : randomOpacity
            }
          }).appendTo("body"); 
        }


        function randomOpacity(){
          var opac = 0;
             opac =  (Math.random());
            return opac;
        }

      });

CSS を削除position : absolute;し、このcssを使用してすべてのdivを同じ場所に配置します

.test {width：15px; 高さ：15px; border-radius：15px; 背景色：黒; } </ p>

于 2012-09-22T21:40:59.507 に答える
0

css関数はcss属性を変更し、Math.random()0-1を返すので、ドロップインするだけです。次のコードは、opacdivの不透明度を変更します。

 <div id="opac">
 lalalalala
</div>
<script>
$(document).ready(function(){
    $("#opac").css('opacity', Math.random());
});
</script>

$(document).readyページが読み込まれると、その中のすべてを呼び出します。このような場合に使用することをお勧めします。

于 2012-09-22T21:38:41.343 に答える
0 
$('#foobar').css({ opacity: Math.random() });​
于 2012-09-22T21:40:11.373 に答える
0

Math.random()常に0から1の間の値を返し、それを作成する関数に直接入れることができますdivs。また、position: absoluteCSSのはすべてdiv同じ場所に配置されるため、結果を正しく表示することはできません。これを試して：

CSS

.test{
    width : 15px;
    height : 15px;
    border-radius:15px;
    background-color : black; 
}​

JS

$(function() {
    for (var i = 0; i < 300; i++) {
        $("<div>", {
            class: "test",
            css: {
                opacity: Math.random()
            }
        }).appendTo("body");
    }
});​

とにかく、randomize()関数は定義されていません。

于 2012-09-22T21:44:29.750 に答える