-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 removeposition : absolute;，用这个 css 你所有的 div 在同一个地方

.test{ 宽度：15px; 高度：15px；边框半径：15px；背景颜色：黑色；}​</p>

于 2012-09-22T21:40:59.507 回答
0

Math.random()总是返回一个介于 0 和 1 之间的值，您可以将它直接放在创建divs. 此外，position: absolute您的 CSS 中的每个都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 回答
0

css 函数改变一个 css 属性，Math.random()返回 0-1，所以你可以把它放进去。下面的代码改变了 opac div 的不透明度。

 <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 回答