自动放烟花（对象+原型+构造函数）-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现自动烟花效果的示例。通过构造函数、原型方法及事件监听来创建烟花发射、飞行及爆炸的效果。该示例包括了随机颜色生成和抛物线运动模拟。
自动放烟花（对象+原型+构造函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>烟花+原型+构造函数</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            background: black;
            overflow: hidden;
        }
        #auto{
            width: 150px;
            height: 50px;
            background: green;
            color: #fff;
            font-size: 16px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            left:50%;
            top:20px;
            margin-left:-75px;
            border-radius: 10px; 
            cursor: pointer;
        }
        .fire{
            width: 3px;
            height:30px;
            position: absolute;
            overflow: hidden;
        }
        .spark{
            width: 3px;
            height: 3px;
            position: absolute;
            overflow: hidden;
            border-radius: 50%;
        }
    </style>

    <script>
        window.onload = function (){
            var oBox = document.getElementById('auto');
            var timer ;
            //点击自动播放
            oBox.onclick = function(e){
                e = e || window.event;
                //事件冒泡
                e.stopPropagation ? e.stopPropagation():e.canceBubble = true;

                if(timer){
                    clearInterval(timer);
                    timer ='';
                }else{
                        timer = setInterval(function(){
                        var x =parseInt( Math.random() * document.documentElement.clientWidth);
                        var y = parseInt(Math.random() * document.documentElement.clientHeight);
                        var fire = new Fire(x,y);
                        fire.init();
                        fire.lanuch();
                        fire.boom();
                        },1000);
                }


            }

            document.onclick = function(e){
                e = e || window.event;
                var fire = new Fire(e.clientX,e.clientY);
                fire.init().lanuch();
                // fire.lanuch();
                // fire.boom();

            }
        }
        //Fire 构造函数 有一个属性 ele
        function Fire (x,y){
            this.x = x;
            this.y = y;
            this.ele = document.createElement('div');

        }

        // init()方法 ，初始化fire;
        Fire.prototype.init = function(){
            this.ele.className = 'fire';
            this.ele.style.left =  this.x +'px' ;
            this.ele.style.top = document.documentElement.clientHeight-30 +'px';
            this.ele.style.background = randomColor();
            document.body.appendChild(this.ele);
            return this;
        }
        // 发射

        Fire.prototype.lanuch = function(){
            var self = this;
            upgradeStartMove(self.ele,{top:self.y,height:3},function(){
                document.body.removeChild(self.ele);
                var temp = parseInt(Math.random()*30)+30;
                for(var i = 0 ;i < temp;i++){
                    //调用self.boom方法；
                    self.boom();
                }
            });
        }

        //爆炸 boom 方法

        Fire.prototype.boom = function(){
                //console.log(1);
            var spark = new Spark(this.x,this.y);
                spark.init().fly();
                // spark.fly();
        }


        // Spark函数 
        //属性 有一个ele 
        function Spark(x,y){
            this.ele = document.createElement('div');
            this.x = x;
            this.y = y;
        }

        //Spark init方法；初始化

        Spark.prototype.init = function(){
            this.ele.className = 'spark';
            this.ele.style.left = this.x + 'px';
            this.ele.style.top = this.y +'px';
            this.ele.style.background = randomColor();
            document.body.appendChild(this.ele);
            return this;
        }

        //Spark 飞起来 方法：fly

        Spark.prototype.fly = function(){
            var self = this;

            //产生的烟花做抛物线运动
            var xspeed = parseInt(Math.random() * 20 * (Math.random() > 0.5 ? 1 : -1)); 
            var yspeed = parseInt(Math.random() * 20 *(Math.random() > 0.5 ? 1 : -1));
                //console.log(yspeed);
            var timer = setInterval(function(){
                yspeed++;
            //  console.log(yspeed);
                self.ele.style.left = self.ele.offsetLeft + xspeed +'px';
                self.ele.style.top = self.ele.offsetTop + yspeed + 'px';                

                if( (self.ele.offsetLeft < 0) || (self.ele.offsetLeft > document.documentElement.clientX ) ||( self.ele.offsetTop > document.documentElement.clientHeight)){
                    clearInterval(timer);
                    document.body.removeChild(self.ele);
                }

            },30); 
        }
        //随机产生背景颜色
        function randomColor(){
            rcolor = parseInt(Math.random()*256);
            gcolor = parseInt(Math.random()*256);
            bcolor = parseInt(Math.random()*256);
            var str = 'rgb('+rcolor+','+gcolor+','+bcolor+')'; 
            return str;
        }


//优化升级后的运动封装函数 ，传入的数据是json形式 如{left:20,width:30}
function upgradeStartMove(obj,json,fn){
    // 第一步清除定时器
       clearInterval(obj.timer);
    //第二步 给定一个定时器
     obj.timer = setInterval(function(){
        var bStop = true;
        //遍历json里面的数据，对里面的每个attr都会判断是否达到目标值
            for(var attr in json){
                var current;
                //首先判断是不是opacity,因为有兼所以要进行处理
                if(attr == 'opacity'){
                    //获取的是opacity的值 是小数
                    current = parseFloat(getStyle(obj,attr)*100);
                    current = parseInt(Math.round(current));
                }else{
                    //如果不是opacity则需要取整 去掉px;
                     current = parseInt(getStyle(obj,attr));
                }

                //第三步 给定一个速度
                var speed = (json[attr] - current) / 8;
                speed = speed > 0? Math.ceil(speed):Math.floor(speed);

                //第四步：赋值 
                if (attr == 'opacity'){
                    obj.style[attr] = (current+speed)/100;
                    obj.style.filter = '(opacity='+(current+speed)+')';
                }else{
                    obj.style[attr] = current+speed+'px';
                }
                //第五步判断 z这个有点难理解 
                if(current != json[attr]){
                    bStop = false;
                }

            }
            //第六步 循环完判断bStop的值
            if(bStop){
                clearInterval(obj.timer);
                if(fn){
                    fn();
                }

            }

    },30);
 }
 function getStyle(ele,attr){
    var res;
    if(window.getComputedStyle){
        // 支持getComputedStyle的浏览器
        res = getComputedStyle(ele)[attr];
    }else if(ele.currentStyle){
        // 支持IE8-的浏览器
        res = ele.currentStyle[attr];
    }else{
        res = ele.style[attr];
    }
    return res;
}   
</script>
<body>
    <div id="auto">自动播放</div>
</body>
</html>