代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>飞舞的气泡</title><style>#dv{width: 800px;height: 600px;background: #cccccc;}</style></head><body><input type="button" value="弹出球" id="btn"><div id="dv"></div><script>var dv = document.getElementById('dv'); //返回对拥有指定id的第一个对象的引用var colors = ['red', 'yellow', 'blue', 'green', 'yellowgreen', '#ff00ff', '#ffdab9', '#00ffff']; //数组元素,各个颜色document.getElementById('btn').onclick = function (){var ball = document.createElement('div'); //方法通过指定名称创建一个元素ball.style.cssText = "position:absolute;border-radius:50%;box-shadow:0px 3px 5px #666;"; //设置HTML元素的style属性值//随机宽高var wh = Math.floor(Math.random() * 50) + 30; //返回的是0~50之间的整数+30ball.style.width = wh + 'px'; //width属性设置或返回元素的宽度ball.style.height = wh + 'px'; //height属性设置或返回元素的高度//随机背景颜色ball.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];dv.appendChild(ball); //指定元素节点的最后一个子节点之后添加节点//设置位置居中var top = dv.clientHeight / 2 - ball.offsetHeight / 2;var left = dv.clientWidth / 2 - ball.offsetWidth / 2;ball.style.left = left + "px"; //left属性设置或返回定位元素的左部位置ball.style.top = top + "px"; //top属性设置或返回定位元素的顶部位置//返回的是0~10之间的整数+1var x = Math.floor(Math.random()*10) + 1;var y = Math.floor(Math.random()*10) + 1;//方法可按照指定的周期（以毫秒计）来调用函数或计算表达式setInterval(function (){left += x;top += y;if (left < dv.offsetLeft || left > (dv.offsetLeft + dv.offsetWidth - ball.offsetWidth)){x = -x;}if (top < dv.offsetTop || top > (dv.offsetTop + dv.offsetHeight - ball.offsetHeight - 3)){y = -y;}ball.style.left = left + "px"; //left属性设置或返回定位元素的左部位置ball.style.top = top + "px"; //top属性设置或返回定位元素的顶部位置}, 30)}</script></body></html>
运行结果如下：
相关推荐
