Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 飞舞的泡泡球
Blogger Information
Blog 14
fans 0
comment 0
visits 8039
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
飞舞的泡泡球
「flasky」
Original
530 people have browsed it

飞舞的泡泡球
效果图如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .container{
  8.             width: 800px;
  9.             height: 800px;
  10.             background-color: #eee;
  11.             margin: 60px auto;
  12.             box-shadow: 5px 8px 2px #bdbdbd inset;
  13.             border: 1px solid #666;
  14.             position: relative;
  16.         }
  17.         .but{
  18.             margin: 0px auto;
  19.             width: 800px;
  20.         }
  22.         .ball{
  23.             border-radius: 50%;
  24.             /*background-color: rgb(157 110 233);*/
  25.             position: absolute;
  26.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <div class="container" id="cont">
  32.     </div>
  33.         <div class="but"><button id="btn" onclick="pball()">弹球</button></div>
  36.     <script>
  37.         var comobj=document.getElementById('cont');
  39.         function pball(){
  40.             var myWidth = Math.floor(Math.random()*30+10);
  41.             var speY = Math.floor(Math.random()*10-6);
  42.             var speX = Math.floor(Math.random()*10-6);
  43.             var myball=document.createElement("div");
  45.             var mycolorR = Math.floor(Math.random()*255);
  46.             var mycolorB = Math.floor(Math.random()*255);
  47.             var mycolorG = Math.floor(Math.random()*255);
  49.             var contW = comobj.clientWidth;
  50.             var contH = comobj.clientHeight;
  52.             // console.log(mycolorR+','+mycolorG)
  53.             myball.style.backgroundColor = `rgb(${mycolorR} ${mycolorB} ${mycolorG})`;
  54.             myball.style.width = `${myWidth}px`;
  55.             myball.style.height = `${myWidth}px`;
  56.             // console.log(`rgb(${mycolorR} ${mycolorB} ${mycolorG})`);
  58.             myball.className='ball';
  59.             comobj.appendChild(myball);
  60.             myball.style.top = `${contW/2}px`;
  61.             myball.style.left =`${contH/2}px`;
  62.             // console.log( `${comobj.clientWidth/2}px`)
  65.             setInterval(function () {
  67.                 var  oftop = myball.offsetTop;
  68.                 var  ofleft= myball.offsetLeft;
  69.                 var myWid = myball.offsetWidth;
  70.                 var myhei = myball.offsetHeight;
  71.                 var tp= contH-myhei;
  72.                 var lp = contW-myWid;
  74.                 var opSy = 0;
  75.                 var lpSx = 0;
  77.                 opSy = oftop + speY;
  78.                 lpSx = ofleft + speX;
  80.                 if (opSy<=0)
  81.                 {
  82.                     myball.style.top='0px';
  83.                     speY = ~speY;
  84.                 } else if (opSy>=tp) {
  85.                     myball.style.top = `${tp}px`;
  86.                     speY = ~speY;
  87.                 }else {
  88.                     myball.style.top = `${opSy}px`;
  89.                 }
  92.                 if (lpSx<=0)
  93.                 {
  94.                     myball.style.left='0px';
  95.                     speX = ~speX;
  96.                 }else if (lpSx>=lp) {
  97.                     myball.style.left = `${lp}px`;
  98.                     speX = ~speX;
  99.                 }else {
  100.                     myball.style.left = `${lpSx}px`;
  101.                 }
  104.             },50)
  109.         }
  110.     </script>
  111. </body>
  112. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post