Question

我希望创建一个div并将其定位在屏幕上每隔2秒的随机位置。我如何使用PHP或Javascript实现这一目标？我喜欢使用像CSS这样的东西。 DIV：

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

// 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>

Answer 2

获取文档的宽度和高度，并使用它来生成随机数。您已经在html中创建了元素，因此无需在JS中重做所有内容。

在你的规格中你想要每2秒，所以你的计时器将是2000毫秒。

在您的计时器功能中，您只需使用新的随机数添加元素的左侧和顶部。

＆＃13;

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);

＆＃13;

#bluemass {
  position:absolute;
}

＆＃13;

<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>

＆＃13;

在随机位置创建div

2 个答案: