如何爲創建的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顏色

回答

相關問題