ASCII码 ASCII码

飞舞的气泡

发布于：2021-12-09 10:01:44  栏目：技术文档

<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

  1.     #main {
  3.       width:800px;
  4.       height:600px;
  5.       background: #ccc;
  6.       position: relative;
  8.     }
  9.     ball{
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15. <input type="button" value="弹出球" id="btn">
  17. <div id="main">
  19. </div>
  21. <script>
  22.   var main = document.getElementById('main');
  23.   var btn = document.getElementById('btn');
  25.   btn.onclick = function () {
  26.     var color = "#"+parseInt(Math.random()*1000);
  27.     var wh = Math.floor(Math.random()*50)+20;
  29.     var ball = document.createElement('div')
  31.     ball.style.cssText = 'position: absolute;border-radius: 50%;'
  32.     ball.style.background = color;
  33.     ball.style.width = wh+'px';
  34.     ball.style.height = wh+'px';
  35.     var top = main.clientHeight/2 - wh;
  36.     var left = main.clientWidth/2 - wh;
  37.     ball.style.top = top+'px';
  38.     ball.style.left = left+'px';
  40.     main.appendChild(ball)
  41.     var x = Math.floor(Math.random()*20)+1
  42.     var y = Math.floor(Math.random()*20)+1
  43.     setInterval(function () {
  44.       left+=x;
  45.       top+=y;
  46.       if (left<=main.offsetLeft || left > (main.offsetLeft+main.offsetWidth-ball.offsetWidth) ){
  47.         x = -x;
  48.       }
  49.       if (top<=main.offsetTop || top > (main.offsetTop+main.offsetHeight-ball.offsetHeight-3)){
  50.         y= -y;
  51.       }
  52.       ball.style.left = left
  53.       ball.style.top = top
  54.     },100)
  55.   }
  57. </script>
  59. </body>
  60. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行