如何为创建的div动态生成rgb颜色

<input type="text" class="ins"> 

<button class="bts">Click here</button> 

<div class="container"> 

</div>

我将在文本框中键入一个数字，然后点击按钮后我想生成多个div s。我想设置为background-color第一div到红，下一个绿色，下一个蓝色，并再次红，绿，蓝等，如果有可能在JQuery中。如何为创建的div动态生成rgb颜色

//脚本我现在用的就是：

$(".bts").click(function(){ 
     var s = $(".ins").val();   

     var shade = 0; 

     for(i=0; i < s; i++) 
     { 
      $(".container").append('<div class="mydiv"> ok </div>').find(".mydiv").css("background-color", "red"); 
     } 
    });

来源

2016-04-07 ganesh raj

你的问题是unclear..doü要改变颜色，你在文本框输入的号码？ –

为空的格“

”，它是根据文本框中给出的数字创建的 –

您希望div具有红色的1/3，绿色的1/3和蓝色的1/3？或者你想用RGB颜色选项设置一种颜色？ – Tinmar

尝试。

$(document).ready(function(){ 
    $(".bts").click(function(){ 
    var s = $(".ins").val();   

    $(".container").html(""); 
    for (i = 1; i <= s; i++) { 
     if (i % 3 == 1) 
      $(".container").append('<div class="reddiv">RED</div>'); 
     else if (i % 3 == 2) 
      $(".container").append('<div class="greendiv">GREEN</div>'); 
     else 
      $(".container").append('<div class="bluediv">BLUE</div>'); 
     $(".reddiv,.greendiv,.bluediv").css("padding", "5px").css("margin", "5px"); 
     $(".reddiv").css("background-color", "red"); 
     $(".greendiv").css("background-color", "green"); 
     $(".bluediv").css("background-color", "blue"); 
    } 
    }); 
});

也看到同样的Hear

来源

2016-04-07 08:54:01 Husen

更改您的代码如下：

var colors = ['red', 'green', 'blue'], 
    currentColor = 0, 
    shade = 0; 
$(".bts").click(function(){ 
    var s = $(".ins").val();  

    for(i=0; i < s; i++) { 
     if(currentColor == colors.length) currentColor = 0; 
     $('<div class="mydiv"> ok </div>').appendTo('.container').css("background-color", colors[currentColor]); 
     currentColor += 1; 
    } 
});

工作例如：

https://jsfiddle.net/d2smzk5m/1/

如果はnt添加更多颜色，只需将它们添加到颜色数组中即可。

来源

2016-04-07 08:58:49 Boratzan

你好亲爱的我以为你想随意设置背景颜色。请在我的浏览器上查看它的测试代码。在输入框中输入（4,2,8..etc），然后按钮随机显示背景。

  $(".bts").click(function() { 
       var s = $(".ins").val(); 
       var shade = 0, tempColorArr = []; 
       tempColorArr = genrateRGB(s); 

       for (i = 0; i < s; i++) { 
        $(".container").append('<div class="mydiv" style="background-color:'+ tempColorArr[i]+'"> ok </div>'); 
       } 
      }); 

      function genrateRGB(tempVal) { 
       var colorArr = []; 
       for (var i = 0; i < tempVal; i++) { 
        colorArr[i] = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
       } 
       return colorArr; 
      }

看到这个链路 http://awesomescreenshot.com/0f25rubc8e

来源

2016-04-07 09:23:03 Rajiv

如何为创建的div动态生成rgb颜色

回答

相关问题