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

Question

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

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

<div class="container">

</div>

我会在文本框中输入一个数字，然后点击按钮后我想生成多个div。我想将第一个background-color的{​​{1}}设置为红色，下一个绿色，下一个蓝色 >，再次红色，绿色，蓝色等等，如果可以在JQuery中使用。

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

div

Answer 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/

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

Answer 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

Answer 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