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

飞舞的气泡

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

要继续练习，不熟练

图片展示

飞舞的气泡

代码展示

    

  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.         #add{
    10. 

  10.             text-align: center;
    11. 

  11.             margin-left: 48%;
    12. 

  12.             margin-bottom: 20px;
    13. 

  13.         }
    14. 

  14.         #box{
    15. 

  15.             width: 480px;
    16. 

  16.             height: 480px;
    17. 

  17.             background: rgb(247, 243, 243);
    18. 

  18.             border: 10px solid rgb(128, 58, 58);
    19. 

  19.             position: relative;
    20. 

  20.             margin: 0 auto;
    21. 

  21.             text-align: center;
    22. 

  22.             line-height: 480px;
    23. 

  23.             color: royalblue;
    24. 

  24.         }
    25. 

  25.         .bool {
    26. 

  26.             border-radius: 50%;
    27. 

  27.             box-shadow: 2px 3px 5px #999999;
    28. 

  28.             position: absolute;
    29. 

  29.         }
    30. 

  30.     </style>
    31. 

  31. </head>
    32. 

  32. <body>
    33. 

  33.     <button id="add">添加气泡</button>
    34. 

  34.     <div id="box">带你看吐泡泡</div>
    35. 

  35.     <script>
    36. 

  36.         function get_rand(min, max) {
    37. 

  37.         return Math.floor(Math.random() * (max - min + 1)) + min;
    38. 

  38.        }
    39. 

  39.        var colorArr=[
    40. 

  40.             '#CC0000',
    41. 

  41.             '#FF0088',
    42. 

  42.             '#FE3232',
    43. 

  43.             '#ccdd22',
    44. 

  44.             '#223355',
    45. 

  45.             '#22aa66',
    46. 

  46.             '#cc6699',
    47. 

  47.             '#123456',
    48. 

  48.             '#987654',
    49. 

  49.             '#FEDCBA',
    50. 

  50.             '#AB39EE',
    51. 

  51.             '#985421',
    52. 

  52.             '#ffffff',
    53. 

  53.             '#000000'
    54. 

  54.         ];
    55. 

  55.         var boxs=document.getElementById('box');
    56. 

  56.         var adds=document.getElementById('add');
    57. 

  57.         adds.onclick=function(){
    58. 

  58.             var obj=document.createElement('div');
    59. 

  59.             var wh=get_rand(10,50);
    60. 

  60.             obj.style.width=wh+'px';
    61. 

  61.             obj.style.height=wh+'px';
    62. 

  62.             obj.style.background=colorArr[get_rand(0,9)];
    63. 

  63.             var top=boxs.clientHeight/2-obj.offsetHeight/2;
    64. 

  64.             var left=boxs.clientWidth/2-obj.offsetWidth/2;
    65. 

  65.             obj.style.top=top+'px';
    66. 

  66.             obj.style.left=left+'px';
    67. 

  67.             obj.className='bool';
    68. 

  68.             boxs.appendChild(obj);
    69. 

  69.             var x = get_rand(1, 10);
    70. 

  70.             var y = get_rand(1, 10);
    71. 

  71.             setInterval(function(){
    72. 

  72.                 top+=x;
    73. 

  73.                 left+=y;
    74. 

  74.                 if(top>boxs.clientHeight-obj.offsetHeight || top < 0){
    75. 

  75.                     x=-x;
    76. 

  76.                 }
    77. 

  77.                 if(left>boxs.clientWidth-obj.offsetWidth || left < 0){
    78. 

  78.                     y=-y;
    79. 

  79.                 }
    80. 

  80.                 obj.style.top = top + 'px';
    81. 

  81.                 obj.style.left = left + 'px';
    82. 

  82.             },30);
    83. 

  83.         }
    84. 

  84.     </script>
    85. 

  85. </body>
    86. 

  86. </html>
    87.

上一篇： 介绍MYSQL进阶的第二篇文章

下一篇： MySQL百万级数据量分页查询方法及其优化建议

推荐阅读