1

javascript を使用してランダムな量のボックスを動的に作成しようとしています。しかし、私はそうする方法に少し迷っています。最初にhtmlでボックスを作成しようとして、自分の手を試してみようと思いました。だから、ここに私のhtmlがあります：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ramdom Boxes</title>
        <script src="A2Q1.js"></script>
    </head>
    <div id="piece8" class="pieces" style="color:#0000ff; top: 50px; left: 50px; width: 60px; height: 60px; cursor: pointer;"></div>

    <body>      
    </body>
</html>

なぜかボックスが表示されません。ただし、ブラウザで要素を調べると、そこにはあるように見えますが、色はありません。これを修正して単純な 2D ボックスを表示するにはどうすればよいですか

4

3 に答える 3

1

私はこのように見えるはずです：http://jsfiddle.net/FHUeE/

フォントの色ではありませbackground-color:#0000ff;ん。color:#0000ff; color

于 2013-10-20T20:40:31.140 に答える
1

<body>すべてのコンテンツがと</body>タグの間にあることを確認する必要があります。

また、色を表示したい場合は、css プロパティの background-color を使用する必要があります。color はテキストの色を変更します:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ramdom Boxes</title>
        <script src="A2Q1.js"></script>
    </head>
    <body>      
  <div id="piece8" class="pieces" style="background-color:#0000ff; top: 50px; left: 50px; width: 60px; height: 60px; cursor: pointer;"></div>
    </body>
</html>
于 2013-10-20T20:40:36.257 に答える
1

これでうまくいくかもしれません：

http://codepen.io/anon/pen/FjrxA

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Random Boxes</title>
  </head>
  <body>
  <script>
  // Make a loop to create a random amount of boxes
  var box_count = Math.random() * 100 + 50;
  for (var i = 0; i < box_count; i++) {
    // Define an array of css attributes
    var attr =[
      // Assign a colour to the box
      'background-color:#' + parseInt(Math.random() * 0xFFFFFF, 10).toString(16),
      // Place the box somewhere inside the window
      'left:' + Math.random() * window.innerWidth + 'px',
      'top:' + Math.random() * window.innerHeight + 'px',
      // Give the box a random size
      'width:' + Math.random() * 100 + 'px',
      'height:' + Math.random() * 100 + 'px','position: absolute'
    ];
    // Join the attributes together with semi-colon and write the div to the document
    // Note: Document write happens at the place where the script is executed
    document.write('<div style="' + attr.join(';')  +'"></div>');
  }
  </script>
  </body>
</html>
于 2013-10-20T20:49:33.533 に答える