<html lang="en"><head><meta charset="UTF-8"><title>自动飞舞的气泡</title><style>div{width:800px;height:600px;background: #ccc;}</style></head><body><input type="button" size="50" value="弹出气泡" id="btn" style="width:100px;height:50px"><div id="dv"></div><script>var button = document.getElementById("btn");setInterval(function() {button.click();},3000);//三秒自动弹出一个气泡var dv = document.getElementById('dv');var colors = ['red', 'yellow', 'blue', 'green', 'yellowgreen', 'black','white','cyan','pink','gray','violet','orange'];document.getElementById('btn').onclick=function(){var ball = document.createElement('div');ball.style.cssText="position:absolute;border-radius:50%;box-shadow: 9px 3px 5px #666;";var wh=Math.floor(Math.random()*50)+30;ball.style.width=wh+'px';ball.style.height=wh+'px';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";ball.style.top=top+"px";var 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";ball.style.top=top+"px";},30)}</script></body></html>
createElement() 方法通过指定名称创建一个元素appendChild() 方法向节点添加最后一个子节点。setInterval() 方法按照指定的周期（以毫秒计）来调用函数或计算表达式。
相关推荐
