JavaScript中的div的随机位置

我试图让Divs随机出现在带有 javascript的网页上.所以一个div出现然后消失,然后另一个div出现在页面上的其他地方,然后消失,然后另一个div再次出现在页面上的另一个随机位置,等等.
我不知道如何生成随机单位的像素或使用什么技术来生成随机位置.

我怎么做?这是我的代码

var currentDivPosition = myDiv.offset(),myDivWidth = myDiv.width(),myDivHeight = myDiv.height(),var myDiv = $('<div>'),finalDivPositionTop,finalDivPositionLeft;

myDiv.attr({ id: 'myDivId',class: 'myDivClass' }); // already defined with position: absolute is CSS file.

// Set new position     
finalDivPositionTop = currentDivPosition.top + Math.floor( Math.random() * 100 );
finalDivPositionLeft = currentDivPosition.left + Math.floor( Math.random() * 100 );

myDiv.css({ // Set div position
  top: finalDivPositionTop,left: finalDivPositionLeft
});

$('body').append(myDiv);

myDiv.text('My position is: ' + finalDivPositionTop + ',' + finalDivPositionLeft); 

myDiv.fadeIn(500);

setTimeout(function(){

  myDiv.fadeOut(500);

  myDiv.remove();       

},3000);

解决方法

这是一种方法.我随机地将div的大小在一个固定的范围内变化,然后设置位置,使对象总是放置在当前窗口边界内.
(function makeDiv(){
    // vary size for fun
    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
    });

    // make position sensitive to size and document's width
    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(1000).fadeOut(500,function(){
      $(this).remove();
      makeDiv(); 
    }); 
})();

编辑:为了乐趣,添加一个随机的颜色.

编辑:添加.remove(),所以我们不用旧的div污染页面.

示例:http://jsfiddle.net/redler/QcUPk/8/

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...