무작위로 div 생성

Question

div를 만들고 2 초마다 화면의 임의의 위치에 배치하려고합니다. PHP 또는 Javascript를 사용하여이 작업을 어떻게 수행합니까? 나는 CSS와 같은 것들을 사용하는 것이 좋습니다. 사업부 :

var blueMass = document.createElement('div'); 
blueMass.style.position = "absolute"; 
blueMass.innerHTML = "<img src='./pic/bluemass.png' height='35' width='35' />"; 
blueMass.id = "bluemass"; 
blueMass.className = "bluemass"; 

// my timer 
window.setInterval(function(){ 
    // Create the divs in here 
}, 3000); 

<div class="bluemass" id="bluemass"> 
    <img src='./pic/bluemass.png' height='35' width='35' /> 
</div> 

Answer 1

그냥 폭 얻고 문서의 높이와 난수를 생성하는 것을 사용한다. 이미 html로 요소를 만들었으므로 JS의 모든 요소를 ​​다시 실행할 필요가 없습니다.

사양에서 2 초마다를 원하므로 타이머에서 2000 밀리 초가됩니다.

타이머 기능에서 요소의 왼쪽과 맨 위에 새로운 난수를 추가하기 만하면됩니다.

var blueMassElement = document.getElementById('bluemass'); 
 
var currentTop = 0; 
 
var documentHeight = document.documentElement.clientHeight; 
 
var documentWidth = document.documentElement.clientWidth; 
 

 
window.setInterval(function() { 
 
    // Create the divs in here 
 
    
 
    currentTop = Math.floor(Math.random() * documentHeight) + 1; 
 
    currentLeft = Math.floor(Math.random() * documentWidth) + 1; 
 
    
 
    blueMassElement.style.top = currentTop + "px"; 
 
    blueMassElement.style.left = currentLeft + "px"; 
 
}, 2000);

#bluemass { 
 
    position:absolute; 
 
}

<div id="bluemass" class="bluemass"> 
 
    <img height="35" width="35" src='http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437' /> 
 
    </div>

Answer 2

// no jQuery 
 
$=document.querySelector.bind(document); // create selector 
 
setInterval(function(){ 
 
    s=$('div').style; 
 
    s.top=Math.random()*window.innerWidth+'px'; // multiply random (0..1) value by window height (you may want to subtract div height) 
 
    s.left=Math.random()*window.innerHeight+'px'; // ... height ... 
 
},2000)

div{position:fixed}

<div>div</div>

// with jQuery 
 
setInterval(function() { 
 
    $('#mydiv').css({ 
 
    top: Math.random() * ($(window).height() - $('#mydiv').height()) + 'px', // multiply random .width(0..1) value by window height minus div height 
 
    left: Math.random() * ($(window).width() - $('#mydiv').width()) + 'px' 
 
    }) 
 
}, 2000)

#mydiv{position:fixed}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="mydiv">div</div>