javascript 【打气球】 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <title>打气球</title>
  6   <style type="text/css">
  7 *{margin: 0;padding: 0;}
  8 body{overflow: hidden;
  9      background: #ccc;
 10 }
 11 .balloon{
 12   top: 0;
 13   left: 0;
 14   position: absolute;
 15   width: 160px;
 16   height: 160px;
 17   background:#faf9f9; 
 18   border-radius: 160px 160px 64px 160px;
 19   transform: rotate(45deg);
 20   /*盒子阴影  横向位移  纵向位移 羽化 半径 颜色*/
 21   box-shadow:-8px -8px 80px -8px #873940 inset; 
 22 
 23 }
 24 .balloon::after{
 25   position: absolute;
 26   bottom: 0;
 27   right: 0;
 28   content: '';
 29   width: 0;
 30   height:0;
 31   border:8px solid transparent;
 32   background: transparent;
 33   border-right-color: #873940;
 34   border-radius: 16px;
 35   transform: rotate(45deg);
 36   
 37 }
 38   </style>
 39 </head>
 40 <body>
 41     
 42   <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
 43   <script type="text/javascript">
 44      /*
 45      1.javascript动态生成div元素
 46      2.让气球动起来，随机运动
 47      3.点击气球，气球做动画之后消失
 48      4.爆炸donghuA    */
 49        var num=10;
 50        var bZ=160;
 51        var wH=window.innerHeight;
 52        var wW=window.innerWidth;
 53        var timer=null;
 54        init(num);
 55        timer=setInterval(move,1000/30);
 56        function init(num){
 57        for(var i=0;i<num;i++){
 58         var randomX=~~(Math.random()*wW)-bZ;
 59             randomX=Math.max(randomX,0);
 60                var oballoon=document.createElement('div');
 61                oballoon.className='balloon'; 
 62                oballoon.style.top=wH-bZ+'px';
 63                oballoon.style.left=randomX+'px';
 64                oballoon.speed=~~(Math.random()*2)+1;
 65                console.log(oballoon.speed);
 66                document.body.appendChild(oballoon);
 67 
 68 
 69        }
 70         
 71       }
 72       //事件委托
 73       document.body.addEventListener('click',function(e){
 74           if(e.target.className.toLowerCase()==='balloon'){
 75             //如果点击事件
 76             //e.target.remove();
 77             boom.call(e.target,function(){
 78           this.parentNode.removeChild(this);
 79                
 80             }.bind(e.target));
 81             init(1);
 82           };
 83       },false);
 84       function boom(cb){
 85         var rotateArr=[10,80];
 86         var index=0;
 87         var len=rotateArr.length;
 88          this.timer=setInterval(function(){
 89           if(this.offsetWidth<10){
 90                clearInterval(this.timer);
 91                cb&&cb;//执行回调函数
 92           }
 93           index++;
 94           index%=len;
 95           this.speed++;
 96           this.style.width=this.offsetWidth-10+'px';
 97           this.style.height=this.offsetHeight-10+'px';
 98           this.style.transform='rotate('+rotateArr[index]+'deg)';
 99           this.style.top=this.offsetTop-this.speed+'px';
100 
101          }.bind(this),1000/30);
102 
103       }
104        function move(){
105       
106       /*
107      1.querySelectorAll获取所有；
108      2.querySelector获取单个；
109       */
110        var aballoons=document.querySelectorAll('.balloon');
111        for(var i=0,len=aballoons.length;i<len;i++){
112          aballoons[i].style.top=aballoons[i].offsetTop-aballoons[i].speed+'px';
113        
114 
115 
116        }
117    }
118      
119   </script>
120 </body>
121 </html>

 

posted @ 2018-01-22 19:22  Justice-V  阅读(160)  评论(0)    收藏  举报