欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

飞舞的气泡

程序员文章站 2022-03-24 09:39:25
...

飞舞的气泡
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>

    

  1.     #main {
    2. 

    3. 

  3.       width:800px;
    4. 

  4.       height:600px;
    5. 

  5.       background: #ccc;
    6. 

  6.       position: relative;
    7. 

    8. 

  8.     }
    9. 

  9.     ball{
    10. 

    11. 

  11.     }
    12. 

  12.   </style>
    13. 

  13. </head>
    14. 

  14. <body>
    15. 

  15. <input type="button" value="弹出球" id="btn">
    16. 

    17. 

  17. <div id="main">
    18. 

    19. 

  19. </div>
    20. 

    21. 

  21. <script>
    22. 

  22.   var main = document.getElementById('main');
    23. 

  23.   var btn = document.getElementById('btn');
    24. 

    25. 

  25.   btn.onclick = function () {
    26. 

  26.     var color = "#"+parseInt(Math.random()*1000);
    27. 

  27.     var wh = Math.floor(Math.random()*50)+20;
    28. 

    29. 

  29.     var ball = document.createElement('div')
    30. 

    31. 

  31.     ball.style.cssText = 'position: absolute;border-radius: 50%;'
    32. 

  32.     ball.style.background = color;
    33. 

  33.     ball.style.width = wh+'px';
    34. 

  34.     ball.style.height = wh+'px';
    35. 

  35.     var top = main.clientHeight/2 - wh;
    36. 

  36.     var left = main.clientWidth/2 - wh;
    37. 

  37.     ball.style.top = top+'px';
    38. 

  38.     ball.style.left = left+'px';
    39. 

    40. 

  40.     main.appendChild(ball)
    41. 

  41.     var x = Math.floor(Math.random()*20)+1
    42. 

  42.     var y = Math.floor(Math.random()*20)+1
    43. 

  43.     setInterval(function () {
    44. 

  44.       left+=x;
    45. 

  45.       top+=y;
    46. 

  46.       if (left<=main.offsetLeft || left > (main.offsetLeft+main.offsetWidth-ball.offsetWidth) ){
    47. 

  47.         x = -x;
    48. 

  48.       }
    49. 

  49.       if (top<=main.offsetTop || top > (main.offsetTop+main.offsetHeight-ball.offsetHeight-3)){
    50. 

  50.         y= -y;
    51. 

  51.       }
    52. 

  52.       ball.style.left = left
    53. 

  53.       ball.style.top = top
    54. 

  54.     },100)
    55. 

  55.   }
    56. 

    57. 

  57. </script>
    58. 

    59. 

  59. </body>
    60. 

  60. </html>
    61.

上一篇： php日历之格利高里历法的日期与儒略日计数如何相互转换

下一篇： 切换阿里镜像源，加速MySQL下载安装

推荐阅读