<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
var bigDiv=document.createElement('div')
bigDiv.className='Square'
document.body.appendChild(bigDiv)
$('.Square').css({
"width":"100px",
"height":"40px",
"border":"1px solid red",
"position":"relative",
"margin":"0 auto"
})
var w=document.querySelector('.Square').clientWidth-10//获取div可视区域的宽度范围
var h=document.querySelector('.Square').clientHeight-10//获取div可是区域的宽度范围
for(var i=0;i<100;i++){
var r=parseInt(Math.random()*256)//随机生成rgb的颜色，色值是0~255
var g=parseInt(Math.random()*256)
var b=parseInt(Math.random()*256)
var x=Math.random()*w
var y=Math.random()*h
var child=document.createElement('div')
child.className='kid'
var fg=document.querySelector('.kid')
child.style.position='absolute'
child.style.top=y+'px'
child.style.left=x+'px'
child.style.background="rgb("+r+','+g+","+b+')'//随机生成的颜色
bigDiv.appendChild(child)
$('.kid').css(
{
"width":"5px",
"height":"5px",
"border-radius":"50%"
}
)
}
</script>
</body>
</html>
