ASCII码 ASCII码

飞舞的小球演示

发布于：2022-06-02 13:48:17  栏目：技术文档

html代码

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.     <style>
  6.         #content {
  8.             width:800px;
  9.             height:600px;
  10.             background: rgb(252, 220, 220);
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <input type="button" value="弹出球" id="btn">
  17. <div id="content">
  19. </div>
  21. <script>
  22.     var content = document.getElementById('content');
  24.     var colors = ['red', 'yellow', 'blue', 'green', 'yellowgreen', '#FF00FF'];
  26.     document.getElementById('btn').onclick = function(){
  28.         var ball = document.createElement('div');
  29.         ball.style.cssText = "position:absolute;border-radius:50%;box-shadow: 0px 3px 5px #666;";
  30.         var wh = Math.floor(Math.random() * 60) + 20;
  31.         ball.style.width = wh + 'px';
  32.         ball.style.height = wh + 'px';
  33.         ball.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  34.         content.appendChild(ball);
  36.         var top = content.clientHeight/2 - ball.offsetHeight/2;
  37.         var left = content.clientWidth/2 - ball.offsetWidth/2;
  40.         ball.style.left = left + "px";
  41.         ball.style.top = top + "px";
  44.         var x = Math.floor(Math.random() * 10) + 1;
  45.         var y = Math.floor(Math.random() * 10) + 1;
  48.         setInterval(function(){
  49.             left += x;
  50.             top += y;
  51.             if(left < content.offsetLeft || left > (content.offsetLeft + content.offsetWidth - ball.offsetWidth)) {
  52.                 x = -x;
  53.             }
  55.             if(top < content.offsetTop || top > (content.offsetTop + content.offsetHeight - ball.offsetHeight - 3)) {
  56.                 y = -y;
  57.             }
  59.             ball.style.left = left + "px";
  60.             ball.style.top = top + "px";
  62.         }, 50)
  63.     }
  65. </script>
  67. </body>
  68. </html>

效果展示

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行