烟花完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
            width: 80%;
            height: 600px;
            border: 2px solid red;
            background: #000;
            margin:20px auto;
            cursor: pointer;
            position: relative;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        .fire{
            width: 10px;
            height:10px;
            position: absolute;
            bottom: 0;
        }
        .small-fire{
            width: 10px;
            height:10px;
            position: absolute;
            border-radius: 50%;
        }
    </style>
    <script src="../public.js"></script>
</head>
<body>
<div id="container"></div>
</body>
<script>

    // for(){
    //     ali[i] = i
    //     ali[i].onclick = function(){
    //         this
    //     }
    // }
    // 范围随机数
function Fire(options) {
    this.x=options.x;
    this.y=options.y;
    this.cont=options.parent;
    this.arr=[];
    this.init();
}
    Fire.prototype.init = function(){
        // 主体烟花，设置样式，位置
        this.ele = document.createElement("div");
        this.ele.className = "fire";
        this.ele.style.left = this.x + "px";
        this.ele.style.background = randomColor();
        this.cont.appendChild(this.ele)

        // 2.开始运动，运动结束
        this.animate()
    }
Fire.prototype.animate=function () {
   move(this.ele,{top:this.y},function () {
       this.ele.remove()
       this.createSmall()
   }.bind(this))//强行把原型的this穿进去，因为这里本来的this是function前面的。
};
    Fire.prototype.createSmall = function(){
        // 创建小烟花,运动，删掉
        var r = Math.round(Math.random()*100+150);

        var num = random(50,60);
        console.log(num)
        for(var i=0;i<num;i++){
            var div = document.createElement("div");//用var无法消失小烟花
            div.className = "small-fire";
            div.style.background = randomColor();
            div.style.left = this.x + "px";
            div.style.top = this.y + "px";
            div.setAttribute("i",i);
            this.cont.appendChild(div);
//            this.arr.push(div)

            // 产生随机坐标
            var l=Math.round(Math.sin(Math.PI/180*10*i)*r) + this.x;//必须要取整，否则来回抖动，永远无法到达目的地也就无法消失。
            var t=Math.round(Math.cos(Math.PI/180*10*i)*r) + this.y;



            // 在move的回调函数中，找不到每个div：
            // 原因：异步：for循环立即执行，回到函数等待执行，回调函数执行时，循环已经结束多时，div已经被重复覆盖
            // 解决方案：

            // 2.使用bind将div强行传进去
            // 3.使用匿名函数生成新的作用域，保存div：***
            // 4.利用let触发块级作用域，保存div：√，即for每次循环，那个div都是个新的div，
//            后面就可以直接用了

//=========================================================================
//            ;(function (div) {
//                move(div,{
//                    left:l,
//                    top:t
//                },function(){
//                    div.remove()
//                })
//            })(div);//匿名函数的方法，匿名函数自动执行，for没执行一次，匿名函数也执行一次，进行传参。div可以用var声明
// =============================================================================
//            move(div,{
//                left:l,
//                top:t
//            },function(){
//                div.remove()
//            })
            //let块级作用于办法，利用let触发块级作用域，保存div：√，即for每次循环，那个div都是个新的div，后面就可以直接用了,div用let声明，后面什么不用改。
//=============================================================================

//
//            move(div,{
//                left:l,
//                top:t
//            },()=>{
//              for(var i=0;i<this.arr.length;i++){
//               this.arr[i].remove()
//              }
//            });//提前定义数组保存，结束时根据数组删除,记得如果使用this，用箭头函数。否则用that传；div可以用var声明
//===============================================================================


            move(div,{
                left:l,
                top:t
            },function(){
                this.remove()
            }.bind(div))//// 2.使用bind将div强行传进去,记得里面使用this，代表的是传进来的div

//======================================================================================
        }
    }



//========================================================================
var ocont=document.getElementById("container");
ocont.onclick=function (eve) {
    var e=eve||window.event;
    new Fire({
        x:e.offsetX,
        y:e.offsetY,
        parent:this
    });
}
</script>
</html>
posted @ 2019-09-04 22:43 菜鸟小何阅读(197) 评论(0) 编辑收藏举报
刷新页面返回顶部
烟花完整版

公告
