オブジェクトジェネレータを作成する

Question

ページ上でランダムな色、サイズ、位置のランダムな四角形を作成するオブジェクトジェネレータを作成するにはどうすればよいですか？私はだと思います。私はすべてのパラメータを設定しましたが、すべてまとめて入れることはできません。

//Size Generator 
    function getRndInteger(min, max) { 
     return Math.floor(Math.random() * (200 - 50 + 1)) + 50; 
    } 

    var getSize = getRndInteger(50, 200); 

//Colour Generator 
    function getRandomColor() { 
     var letters = 'ABCDEF'; 
     var colour = '#'; 
     for (var i = 0; i < 6; i++) { 
     colour += letters[Math.floor(Math.random() * 16)]; 
     } 
     return colour; 
    } 

    var colour = getRandomColor(); 

//Position Generator 
    function getPosition(min, max) { 
     return Math.floor(Math.random() * (600 - 0 + 1)) + 0; 
    } 

    var getX = getPosition(0, 600); 
    var getY = getPosition(0, 600); 

//Square Generator 
    function squareGenerator() { 

     var div = document.createElement("square"); 

     div.style.backgroundColor = colour; 

     div.style.left = getX + "px"; 

     div.style.top = getY + "px"; 

     div.style.height = getSize + "px"; 

     div.style.width = getSize + "px"; 

    } 

ここで私はスタックされているどのようにこのページに表示する取得です。

Answer 1

まず、作成したdivは何も囲まないので、表示されません。
バイパスはdiv.style.positionをfixedに設定します。最後にsquareGenerator();

：すべてのdocument.body.appendChild(div)

第三には、あなたが電話をかけることで、関数を呼び出す必要があります：すべての

第二には、あなたは使用して、たとえば、身体へのdivを追加する必要があります要素を作成するときは、div/section/article-> document.createElement（ 'div'）のような有効なHTML要素を使用します。それは '正方形'で動作しているようだが、私はすべてのブラウザがリベラルであるとは思わない。

//Size Generator 
 
    function getRndInteger(min, max) { 
 
     return Math.floor(Math.random() * (200 - 50 + 1)) + 50; 
 
    } 
 

 
    var getSize = getRndInteger(50, 200); 
 

 
//Colour Generator 
 
    function getRandomColor() { 
 
     var letters = 'ABCDEF'; 
 
     var colour = '#'; 
 
     for (var i = 0; i < 6; i++) { 
 
     colour += letters[Math.floor(Math.random() * 16)]; 
 
     } 
 
     return colour; 
 
    } 
 

 
    var colour = getRandomColor(); 
 

 
//Position Generator 
 
    function getPosition(min, max) { 
 
     return Math.floor(Math.random() * (200 - 0 + 1)) + 0; 
 
    } 
 

 
    var getX = getPosition(0, 600); 
 
    var getY = getPosition(0, 600); 
 

 
//Square Generator 
 
    function squareGenerator() { 
 

 
     var div = document.createElement("div"); 
 

 
     div.style.backgroundColor = colour; 
 

 
     div.style.left = getX + "px"; 
 

 
     div.style.top = getY + "px"; 
 

 
     div.style.height = getSize + "px"; 
 

 
     div.style.width = getSize + "px"; 
 
     div.style.position='fixed'; 
 
     document.body.appendChild(div); 
 
    } 
 
    squareGenerator();

あなたは、ランダムな位置に作成された希望の正方形を見ることができます。