原生js生成的10个圆,随机位置、随机大小、随机背景颜色;
使用到的功能点有,随机位置、随机大小、随机背景颜色、创建元素、定时
器!
布局:
<div class="wrap"></div>
样式:
* {
padding: 0;
margin: 0;
}
div .wrap {
position: relative;
}
.wrap div {
position: absolute;
border-radius: 50%;
}
js逻辑代码:
// 创建元素
var mybox = document.getElementsByClassName("wrap")[0];
var num = 0;
// 设置定时器
var time = setInterval(creatball, 800);
// 创建小球函数
function creatball() {
// 创建元素
var mydiv = document.createElement("div");
var wh = random(200, 5);
num++;
// 设置宽高
mydiv.style.width = wh + "px";
mydiv.style.height = wh + "px";
// 设置元素背景颜色
mydiv.style.background = rancolr();
// 随机位置
mydiv.style.left = random(0, window.innerWidth - wh) +
"px";
mydiv.style.top = random(0, window.innerHeight - wh) +
"px";
mybox.appendChild(mydiv);
if (num >= 10) {
clearInterval(time);
}
}
// 随机颜色
function rancolr() {
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
var rgb = "rgb(" + r + "," + g + "," + b + ")";
return rgb;
}
// 随机数
function random(max, min) {
return parseInt(Math.random() * (max - min + 1) + min);
}