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

飞舞的气泡

程序员文章站 2022-03-13 13:55:58
...

照猫画虎做了几遍

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>飞舞的气泡</title>
    8. 

  8.     <style >
    9. 

  9.              #dhk{
    10. 

  10.             background: lightgrey;
    11. 

  11.             width: 600px;
    12. 

  12.             height: 600px;
    13. 

  13.             box-shadow: 0px 5px 5px 3px gray;
    14. 

  14.         }
    15. 

  15.         #btn{
    16. 

  16.             width: 70px;
    17. 

  17.             height: 30px;
    18. 

  18.         }
    19. 

  19.     </style>
    20. 

  20. </head>
    21. 

  21. <body>
    22. 

    23. 

  23.     <div id="dhk"></div>
    24. 

  24.     <input type="button" value="点一点" id="btn">
    25. 

  25.     <script >
    26. 

    27. 

  27.         var dhk = document.getElementById("dhk");
    28. 

  28.         var colors=['red', 'yellow', 'blue', 'green', 'yellowgreen', '#FF00FF'];
    29. 

  29.         document.getElementById('btn').onclick=function(){
    30. 

    31. 

  31.             var ball = document.createElement('div');
    32. 

    33. 

  33.             ball.style.cssText="position:absolute;border-radius:50%;box-shadow: 0px 3px 5px #666";
    34. 

    35. 

  35.             var kg = Math.floor(Math.random()*70)+30;
    36. 

    37. 

  37.             ball.style.width=kg+'px';
    38. 

  38.             ball.style.height= kg+'px';
    39. 

    40. 

    41. 

  41.             ball.style.backgroundColor=colors[Math.floor(Math.random()*colors.length)];
    42. 

    43. 

  43.             dhk.appendChild(ball);
    44. 

    45. 

  45.             var top = dhk.clientHeight/2 - ball.offsetHeight/2;
    46. 

  46.             var left = dhk.clientWidth/2 - ball.offsetWidth/2;
    47. 

    48. 

  48.             ball.style.left=left+"px";
    49. 

  49.             ball.style.top=top+"px";
    50. 

    51. 

  51.             var x=Math.floor(Math.random()*10)+1;
    52. 

  52.             var y=Math.floor(Math.random()*10)+1;
    53. 

    54. 

  54.             setInterval(function() {
    55. 

    56. 

  56.                 left+=x;
    57. 

  57.                 top+=y;
    58. 

  58.             if(left < dhk.offsetLeft || left > (dhk.offsetLeft+dhk.offsetWidth-ball.offsetWidth)) {
    59. 

  59.                 x = -x;
    60. 

  60.             }
    61. 

    62. 

  62.             if(top < dhk.offsetTop || top > (dhk.offsetTop+dhk.offsetHeight-ball.offsetHeight-3)) {
    63. 

  63.                 y = -y;
    64. 

  64.             }
    65. 

    66. 

  66.             ball.style.left=left+"px";
    67. 

  67.             ball.style.top=top+"px";
    68. 

    69. 

  69.             }, 40);
    70. 

  70.         }
    71. 

  71.     </script>
    72. 

  72. </body>
    73. 

  73. </html>
    74.

飞舞的气泡

上一篇： localstroage的保存用户设置

下一篇： 聊一聊如何把SSL证书安装到小鸟云服务器上

推荐阅读