要继续练习，不熟练

图片展示

代码展示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>气泡</title>
  8.     <style>
  9.         #add{
  10.             text-align: center;
  11.             margin-left: 48%;
  12.             margin-bottom: 20px;
  13.         }
  14.         #box{
  15.             width: 480px;
  16.             height: 480px;
  17.             background: rgb(247, 243, 243);
  18.             border: 10px solid rgb(128, 58, 58);
  19.             position: relative;
  20.             margin: 0 auto;
  21.             text-align: center;
  22.             line-height: 480px;
  23.             color: royalblue;
  24.         }
  25.         .bool {
  26.             border-radius: 50%;
  27.             box-shadow: 2px 3px 5px #999999;
  28.             position: absolute;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <button id="add">添加气泡</button>
  34.     <div id="box">带你看吐泡泡</div>
  35.     <script>
  36.         function get_rand(min, max) {
  37.         return Math.floor(Math.random() * (max - min + 1)) + min;
  38.        }
  39.        var colorArr=[
  40.             '#CC0000',
  41.             '#FF0088',
  42.             '#FE3232',
  43.             '#ccdd22',
  44.             '#223355',
  45.             '#22aa66',
  46.             '#cc6699',
  47.             '#123456',
  48.             '#987654',
  49.             '#FEDCBA',
  50.             '#AB39EE',
  51.             '#985421',
  52.             '#ffffff',
  53.             '#000000'
  54.         ];
  55.         var boxs=document.getElementById('box');
  56.         var adds=document.getElementById('add');
  57.         adds.onclick=function(){
  58.             var obj=document.createElement('div');
  59.             var wh=get_rand(10,50);
  60.             obj.style.width=wh+'px';
  61.             obj.style.height=wh+'px';
  62.             obj.style.background=colorArr[get_rand(0,9)];
  63.             var top=boxs.clientHeight/2-obj.offsetHeight/2;
  64.             var left=boxs.clientWidth/2-obj.offsetWidth/2;
  65.             obj.style.top=top+'px';
  66.             obj.style.left=left+'px';
  67.             obj.className='bool';
  68.             boxs.appendChild(obj);
  69.             var x = get_rand(1, 10);
  70.             var y = get_rand(1, 10);
  71.             setInterval(function(){
  72.                 top+=x;
  73.                 left+=y;
  74.                 if(top>boxs.clientHeight-obj.offsetHeight || top < 0){
  75.                     x=-x;
  76.                 }
  77.                 if(left>boxs.clientWidth-obj.offsetWidth || left < 0){
  78.                     y=-y;
  79.                 }
  80.                 obj.style.top = top + 'px';
  81.                 obj.style.left = left + 'px';
  82.             },30);
  83.         }
  84.     </script>
  85. </body>
  86. </html>