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

【问题标题】：how to generate rgb color dynamically for created div如何为创建的 div 动态生成 rgb 颜色
【发布时间】：2016-04-07 17:28:42
【问题描述】：

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

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

<div class="container">

</div>

我会在文本框中输入一个数字，然后点击按钮后我要生成多个divs。我想将第一个 div 的 background-color 设置为 red，下一个 green，下一个 blue，然后再次red,green,blue 等等，如果在 JQuery 中可能的话。

// 我正在使用的脚本是：

 $(".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");
         }
    });

【问题讨论】：

您的问题不清楚..您想将颜色更改为您在文本框中输入的数字吗？
对于空 div "
ok
" 根据文本框中给出的数字创建
您希望该 div 有 1/3 的红色、1/3 的绿色和 1/3 的蓝色？或者你想用 RGB 颜色选项设置一种颜色？
现在我得到了你想要的，通过查看答案。 ;)

标签： jquery html css

【解决方案1】：

将您的代码更改为：

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/

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

【讨论】：

【解决方案2】：

试试这个。

$(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

【讨论】：

【解决方案3】：

你好亲爱的我以为你想随机设置背景颜色。请在我的浏览器上查看它经过测试的代码。对于exm-您在输入框（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

【讨论】：