Javascript div随机定位

问题是我正在学习javascript，但我还不知道一切。 我想做一个随机位置的div。我发现：

(function makeDiv(){
  var divsize = ((Math.random()*100) + 50).toFixed();
  var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
  $newdiv = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px',
    'background-color': color
  });

  var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
  var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

  $newdiv.css({
    'position':'absolute',
    'left': posx+'px',
    'top': posy+'px',
    'display': 'none'
  }).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function(){
    $(this).remove();
    makeDiv(); 
  }); 
})();

（函数makeDiv（）{
var divsize=（（Math.random（）*100）+50）.toFixed（）；
var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
$newdiv=$（''）.css({
“宽度”：divsize+'px'，
“高度”：divsize+'px'，
“背景色”：颜色
});
var posx=（Math.random（）*（$（document.width（）-divsize））.toFixed（）；
var posy=（Math.random（）*（$（document.height（）-divsize））.toFixed（）；
$newdiv.css({
'位置'：'绝对'，
“左”：posx+“px”，
'top'：posy+'px'，
“显示”：“无”
}).appendTo（'body'）.fadeIn（100）.延迟（300）.衰减（200，函数（）{
$（this.remove（）；
makeDiv（）；
}); 
})();

这是我主要想要的，但不完全是

我想修改这个代码，在主体中有一个

元素，它的位置在鼠标上方发生变化。我现在有：

---

它不起作用，我也不知道为什么。

试试这个。创建一个div并给它一个id=“moveMe”。这段代码在jQuery中，更容易学习js逻辑

我添加了注释，以便您可以看到它在做什么

//first we want to get the width of the screen
var width = jQuery(window).width();
//now the height of the screen
var height = jQuery(window).height();

//when the mouse enters our div with an id set to moveMe preform a function
jQuery('#moveMe').mouseenter(function(){
  //randomly select a position on the y axis
  var topPos = Math.floor((Math.random() * height)+0);
  //randomly select a position on the x axis
  var leftPos = Math.floor((Math.random() * width)+0);
  //now move the div. Because we are looking to see if the mouse enters moveMe we can use this here, as the element is already slected.
  jQuery(this).css({position:'absolute', top:topPos+'px', left:leftPos+'px'});
});

---

试试下面的js代码。这是你需要的吗？ 这里有两条评论，你可以理解发生了什么

<script>
(function makeDiv(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width':divsize+'px',
        'height':divsize+'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).appendTo( 'body' ).fadeIn(100); 
    //on the coded above the div shows up


//the code bellow adds the event mouseover to the div
//when fired, makes the div to fadeout and removed, then creates another div
$newdiv.mouseover(function(){
    $newdiv.fadeOut(200).remove()
    makeDiv()
    });
}());
</script>

（函数makeDiv（）{
var divsize=（（Math.random（）*100）+50）.toFixed（）；
var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
$newdiv=$（''）.css({
“宽度”：divsize+'px'，
“高度”：divsize+'px'，
“背景色”：颜色
});
var posx=（Math.random（）*（$（document.width（）-divsize））.toFixed（）；
var posy=（Math.random（）*（$（document.height（）-divsize））.toFixed（）；
$newdiv.css({
'位置'：'绝对'，
“左”：posx+“px”，
'top'：posy+'px'，
“显示”：“无”
}).appendTo（‘body’）.fadeIn（100）；
//在上面编码的屏幕上，显示div
//下面的代码将事件mouseover添加到div
//激发时，使div淡出并移除，然后创建另一个div
$newdiv.mouseover（函数（）{
$newdiv.fadeOut（200）.remove（）
makeDiv（）
});
}());

欢迎来到StackOverflow！由于屏幕截图很难转换为文本，您能否在问题中添加缺少的HTML作为文本？它可以工作，但有时它可以有#5BC6FF或#D4FF9E颜色。我试着自己修复它，但当我这么做的时候，移动div的代码没有被激活，这些颜色是背景颜色和顶部的菜单颜色。我可以继续看菜单，但这对我来说不是问题。如果你能把它修好，我会很高兴的。谢谢，有什么办法可以让div删除变慢或者在一段时间后删除？好吧，关于可以使用while语句控制的颜色（当颜色与#5BC6FF或#D4FF9E相等时，再次随机选择。若要使div删除速度较慢，可以将淡出时的数字更改为更大的数字。我建议您也在鼠标悬停后立即删除div的事件，因为鼠标悬停时，鼠标悬停将无论如何触发。您可以使用.off（）删除该事件。）我只了解上半部分。我试图将淡出更改为更大，但似乎没有更改。我看到在删除时它会更改。删除（）我想做一种迷你游戏，当你把鼠标放在正方形或长方形上时，它会消失，你必须点击它，但当鼠标移到上面0.001秒后它就消失了，这是不可能的。我有第二部分代码。我指的是有点击的部分。我试过了，结果是没有代码没有运行.我试图写“makeDiv（）”，而不是继续，然后什么也不写。