核心提示：随机跳出大小颜色不一样的p。实现后的效果如下 vcG93ZXI4OTg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravit...
随机跳出大小颜色不一样的p。
实现后的效果如下
vcG93ZXI4OTg4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="428" />以下是基本布局的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>popupBall</title>
</head>
<body>
<p id="box">
</p>
提前写一下基本的样式
<style>
#box {
width: 555px;
height: 555px;
background: #e4393c;
position: relative;
}
#box p {
position: absolute;
}
</style>
下来就是要写js脚本，首先定义全局变量box,num，其中num用来记录p的数量;
window.onload = function () {
var box = document.getElementById("box");
var num = 1;
}
准备一个生成随机数的函数
function randomN(min, max) {
return Math.floor(Math.random() * (max - min) + min)
}
一个生成随机颜色的函数
function randomColor() {
return '#' +
(function (color) {
return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
})('');
}
一个生成随机p的函数
function newDiv() {
var doc = document;
box.appendChild(doc.createDocumentFragment().appendChild(doc.createElement("p")));
var that = doc.querySelector("#box>p:last-child");
that.style.width = randomN(5, 50) + "px";
that.style.height = randomN(5, 50) + "px";
that.style.borderRadius = randomN(5, 50);
that.style.top = randomN(30, 500) + "px";
that.style.left = randomN(30, 500) + "px";
that.style.backgroundColor = randomColor();
that.style.borderRadius = randomN(5, 50) + "%";
num++;
}
一个删除随机某个p的函数
function removeDiv() {
var doc = document;
var child = "#box>p:nth-child(" + randomN(1, num) + ")";
if (child) {
var del = doc.querySelector(child);
box.removeChild(del);
num--;
}
}
如何启动呢?给box添加一个点击开始的函数
box.onclick = function(){}
在这个函数里面，加一个定时器，定时器内部利用num进行判断，只要num小于10，就只添加。。。。
box.onclick = function () {
setInterval(function () {
if (num < 10) {
newDiv();
newDiv();
newDiv();
newDiv();
newDiv();
newDiv();
newDiv();
newDiv();
}
if (num > 50) {
removeDiv();
newDiv();
removeDiv();
newDiv();
removeDiv();
removeDiv();
newDiv();
removeDiv();
newDiv();
removeDiv();
}
else {
newDiv();
removeDiv();
newDiv();
removeDiv();
newDiv();
newDiv();
removeDiv();
newDiv();
removeDiv();
newDiv();
}
}, 100)
}
这样就完成了。
