原生JavaScript，几个步骤，完成多彩小球运动，！

多彩小球

1、首先第一步，先把css样式写好：

*

.box{

position:absolute;

left:0;

top:0;

width: 80px;

height: 80px;

background:-webkit-linear-gradient(rgb(255,255,255),rgb(122, 180, 13));

border-radius:50%;

}

2、因为是动态生成，所以不需要在body标签写入 .box 类名标签。直接写入 js语句；

time(10); // 自执行 括号中有10，所以生成10个小球，用num 形参来接收

function time(num){

for(var i = 0; i

var Box = document.createElement("div"); // 创建元素节点，

Box.className = "box"; // 给Box变量添加 类名为.box跟css样式对应

Box.style.background = yan(); // 给Box变量添加背影颜色yan()只是个函数自执行

document.body.appendChild(Box); //把Box标签写入body标签里。

// 定义每个小球的变化量

Box.Le = 3 + i;

Box.To = 3 + i;

};

var aBox = document.querySelectorAll(".box"); // 获取所有的.box类名标签

// 获取可视区窗口 ，获取到浏览器的窗口和aBox元素的宽高

var maxH = document.documentElement.clientHeight - aBox[0].clientHeight;

var maxW = document.documentElement.clientWidth - aBox[0].clientWidth;

// 重定义可视区 width height

window.onresize = function (){

maxH = document.documentElement.clientHeight - aBox[0].clientHeight;

maxW = document.documentElement.clientWidth - aBox[0].clientWidth;

}

setInterval(timer,13); // 定时器没过13毫秒执行一次

function timer(){

for(var i = 0; i

var bian = aBox[i]

// 获取元素定位的 left top

var Left = bian.offsetLeft,

Top = bian.offsetTop;

// 总和 变化量+元素left top值

var left = Left + bian.Le,

top = Top + bian.To;

// 判断边界 到了边界就弹

if(top >= maxH || top

top = Math.min(top,maxH);

top = Math.max(top,0);

bian.To = -bian.To;

}

if(left >= maxW || left

left = Math.min(left.maxW);

left = Math.max(left,0);

bian.Le = -bian.Le;

}

// 赋值

}

}

}

// 函数封装元素属性背影；

function yan(){

var r = Math.floor(Math.random()*256);

var g = Math.floor(Math.random()*256);

var b = Math.floor(Math.random()*256);

return "-webkit-linear-gradient(rgb(255,255,255),rgb("+r+", "+g+", "+b+"))";

}