html 随机位置,JavaScript中的div的随机位置

这是一种方法.我随机地将div的大小在一个固定的范围内变化,然后设置位置,使对象总是放置在当前窗口边界内.

(function makeDiv(){

// vary size for fun

var divsize = ((Math.random()*100) + 50).toFixed();

var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);

$newdiv = $('

'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污染页面.