这个球总是叠加到一起了 .. 求大神解释
var body = document.body;
function bg() {
return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
}
var show = function() {
for (var i = 0; i < 10; i++) {
var newdiv = document.createElement("div");
var cl = document.createAttribute("style");
cl.value = "width: 50px;background-color:" + bg() + ";height: 50px;position:absolute;border-radius:50px;";
newdiv.setAttributeNode(cl);
body.appendChild(newdiv);
}
};
show();
var idb = document.getElementsByTagName('div');
var qx = Math.floor(Math.random() * 100);
var qy = Math.floor(Math.random() * 100);
var x = 0;
var y = 0;
var sx = 1;
var sy = 1;
function add() {
for (var b = 0; b < idb.length; b++) {
idb[b].style.top = y + "px";
idb[b].style.left = x + "px";
}
x = x + sx;
y = y + sy;
if (x >= innerWidth - 50 || x <= 0) {
sx = -1 * sx;
}
if (y >= innerHeight - 50 || y <= 0) {
sy = -1 * sy;
}
}
id = setInterval('add()', 10);
第一位大佬答的很好,这个一般涉及动画的效果推荐使用canvas与requestAnimationFrame,,因为你要求是DOM实现,,我给你做了一个样本,参考一下: