烟花 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 1200px;
                height: 700px;
                background-color: #000000;
                border: 3px solid purple;
                margin: 200px auto;
                position: relative;
            }
            
            .fire {
                width: 5px;
                height: 5px;
                border-radius: 50%;
                position: absolute;
                left: 0;
                bottom: 0;
            }
            
            .smallfire {
                width: 5px;
                height: 5px;
                border-radius: 50%;
                position: absolute;
            }
        </style>
    </head>

    <body>
        <div id="box">

        </div>
    </body>
    <script src="move.js">
    </script>
    <script type="text/javascript">
        function Fire(obj) {
            this.x = obj.x;
            this.y = obj.y;
            this.obox = parent.obox;
            this.init();
        }
        Fire.prototype.init = function() {
            this.ele = document.createElement("div");
            this.ele.className = "fire";
            this.ele.style.backgroundColor = randomcolor();
            this.ele.style.left = this.x + "px";

            this.obox.appendChild(this.ele);
            this.animit();
        }
        Fire.prototype.animit = function() {
            move(this.ele, {
                top: this.y
            }, function() {
                this.ele.remove();
                this.ceratesmall();
            }.bind(this))

        }
        Fire.prototype.ceratesmall = function() {
            var num = random(15, 25)
            for(i = 0; i < num; i++) {
                let div = document.createElement("div");
                div.className = "smallfire";
                div.style.left = this.x + "px";
                div.style.top = this.y + "px";
                div.style.backgroundColor = randomcolor();
                this.obox.appendChild(div);
                var l = random(0, this.obox.offsetWidth)
                var t = random(0, this.obox.offsetHeight)
                move(div, {
                    left: l,
                    top: t
                }, function() {
                    div.remove()
                })

            }

        }

        function randomcolor() {
            return "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";
        }

        function random(a, b) {
            return Math.round(Math.random() * (a - b) + b);
        }

        function getStyle(ele, attr) {
            if(ele.currentStyle) {
                return ele.currentStyle[attr];
            } else {
                return getComputedStyle(ele, false)[attr];
            }
        }

        var obox = document.querySelector("#box");
        obox.onclick = function(eve) {
            
            var e = eve || window.event;
//            console.log(e.offsetX)
            new Fire({
                x: e.offsetX,
                y: e.offsetY,
                
                parent: obox,
            })

        }
    </script>

</html>

 

posted @ 2019-09-03 23:51  奋斗，少年。  阅读(169)  评论(0)    收藏  举报