Question

我编写了一些jQuery代码，用于在div中插入按钮，并将它们随机放置在整个可用表面上。不幸的是，无论我如何使用CSS，它们总是最终位于完全相同的位置，一个位于另一个位置。如果我手动添加它们也会发生这种情况，因此它不是JavaScript /动态性问题。

我的代码是：

<div class="">
    <p><a id="start_button" class="btn btn-primary btn-large">Start game &raquo;</a></p>
</div>
<div id="game_board" class="jumbotron">
   <input type='button' style='left:300px; top:15000px' class='click-point' id='2' value='test' />
</div>

分别地，

<script>
    $(document).ready(function () {
        var i = 0;
        $('#start_button').click(function () {
            $("#game_board").append($("<input type='button' style='position:absolute; 
                               left:" + Math.random() * ($("#game_board").width()) + " px; 
                               top:" + Math.random() * ($("#game_board").height()) + " px'     
                               class='click-point' id='" + (i++) + "' value='test" + i + "' />"));
        });
    }); 
</script>

Answer 1

Demo

HTML：

<div>
    <p><a id="start_button" class="btn btn-primary btn-large">Start game &raquo;</a></p>
</div>
<div id="game_board" class="jumbotron"></div>

JS：

var protoBtn = document.createElement("input"),
    board = document.getElementById("game_board"),
    w = board.clientWidth,
    h = board.clientHeight,
    i = 0;
protoBtn.type = 'button';
protoBtn.className = "click-point";
document.getElementById('start_button').onclick = function() {
    var btn = protoBtn.cloneNode(false);
    btn.value = 'test'+ ++i;
    board.appendChild(btn);
    btn.style.left = Math.random() * (w-btn.offsetWidth) + 'px';
    btn.style.top = Math.random() * (h-btn.offsetHeight) + 'px';
};

CSS：

#game_board {
    height: 400px;
    width: 400px;
    border: 1px solid blue;
    position: relative;
}
#game_board > .click-point {
    position: absolute;
}

Answer 2

我在这里做了一个小提琴：http://jsfiddle.net/csanonymus/kQAXC/

我使用了这样的普通JS：

var startGame=document.getElementById('start_button');
var min=1;
var max=400;
var board=document.getElementById('game_board');
var i=1;
startGame.onclick=function(){
    var newItem =  document.createElement('input');
    newItem.type="button";
    newItem.style.position="absolute";
    newItem.value="test"+i;
    i++;

    newItem.style.left=Math.floor(Math.random() * (max - min) + min) + "px";
    newItem.style.top=Math.floor(Math.random() * (max - min) + min) + "px";
    board.appendChild(newItem);
}

无法将输入按钮定位到div中

2 个答案: