Как дублировать автоматический случайный цвет сгенерированный квадрат с использованием того же стиля и функции

Даже я попытался найти ответ. Я не нашел точную информацию (до сих пор). У меня есть следующий код:Как дублировать автоматический случайный цвет сгенерированный квадрат с использованием того же стиля и функции

<!DOCTYPE html personal exercise> 
 
<html lang="en"> 
 
    <head> 
 
     <title>An DOM example project</title> 
 
     <meta http-equiv="refresh" content="0.005"> 
 
     <style> 
 
      div {position:absolute; margin-left:100px}; 
 
     </style> 
 
    </head> 
 
     <body id="theBody" onload="show_pattern()"> 
 
      <script> 
 
       function show_pattern() { 
 
        var top_position=25, left_position=25; 
 
        var width=500, height=500; 
 
        var color_list=["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; 
 
        var the_body=document.getElementById("theBody"); 
 

 
        while(width>50) { 
 
         var this_div=document.createElement("div"); 
 
         var random_color=Math.random()*7; 
 
         random_color=Math.floor(random_color); 
 
         this_div.style.top=top_position + "px"; 
 
         this_div.style.left=left_position + "px"; 
 
         this_div.style.width=width + "px"; 
 
         this_div.style.height=height + "px"; 
 
         this_div.style.background=color_list[random_color]; 
 
         the_body.appendChild(this_div); 
 
         top_position += 10; left_position += 10; 
 
         width -= 20; height -= 20;}} 
 
      </script> 
 
     </body> 
 
</html>

Я хочу, чтобы отобразить на одной странице два цветных квадратов, используя ту же функцию (show_pattern()) и стиль Div.

Благодарим вас за поддержку!

источник

2017-01-17 Zvancea Catalin

Вам нужно добавить в for петлю и создать в нем оберточной дивы для цветных квадратов

function show_pattern() { 
 
     var color_list=["red", "orange", "yellow", "green", "blue", "indigo", "violet"]; 
 
     var the_body=document.getElementById("theBody"); 
 
    for(i=0; i<2; i++){ 
 
      var width=500, height=500, top_position=25, left_position=25; 
 
      var wrap_div=document.createElement("div"); 
 
      wrap_div.className="wrap"; 
 
      wrap_div.style.left=500*i + "px"; 
 
      the_body.appendChild(wrap_div); 
 
     while(width>50) { 
 
      var this_div=document.createElement("div"); 
 
      var random_color=Math.random()*7; 
 
      random_color=Math.floor(random_color); 
 
      this_div.style.top=top_position + "px"; 
 
      this_div.style.left=left_position + "px"; 
 
      this_div.style.width=width + "px"; 
 
      this_div.style.height=height + "px"; 
 
      this_div.style.background=color_list[random_color]; 
 
      wrap_div.appendChild(this_div); 
 
      top_position += 10; left_position += 10; 
 
      width -= 20; 
 
      height -= 20; 
 
     } 
 
    } 
 
}

body { 
 
    height: 100vh; 
 
} 
 
.wrap div { 
 
    position: absolute; 
 
} 
 
.wrap { 
 
    display: inline-block; 
 
    position: relative; 
 
}

<body id="theBody" onload="show_pattern()"> 
 
     </body>

источник

2017-01-17 14:39:59 Banzay

Спасибо Банзай за вашу помощь и быстрый ответ :-)! –

Я следил за кодом, и он отлично работает. Можете ли вы мне помочь, чтобы установить только второй квадрат (обертка) в определенном положении, чтобы полностью отделить от первого квадрата? –

Я изменил ответ. это то, что вам нужно? – Banzay

Как дублировать автоматический случайный цвет сгенерированный квадрат с использованием того же стиля и функции

ответ

Смежные вопросы