面向对象 实现 烟花特效

烟花特效

1. 点击创建一颗烟花
   获取点击坐标对象
   实例化一个烟花对象
2. 烟花爆炸
   创建X个烟花节点（随机20-40）
   添加样式，计算坐标，颜色
   添加到页面
   运动到终点删除

// 设置html body的背景颜色 
	html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
}
//烟花容器
.wrap{
    width: 100%;
    height: 100%;
    position: relative;
}
//烟花样式
.fire{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
}

<div class="wrap"></div>

在这里引入自己编写的工具类库 utils.js

// 通过类名获取元素(全局)
function byClass1(classn){
    var allTag = document.all || document.getElementsByTagName('*');
    var arr = [];
    var reg = new RegExp('\\b'+classn+'\\b','g');
    for (var i = 0; i < allTag.length; i++){
        // if (allTag[i].className.indexOf(classn) != -1) {
        if (reg.test(allTag[i].className)) {
            arr.push(allTag[i]);
        }
    }
    return arr;
}

// 通过类名获取元素(局部)
function byClass2(parentId,classn){//
    var parent = document.getElementById(parentId);
    var allTag = parent.all || parent.getElementsByTagName('*');
    var arr = [];
    var reg = new RegExp('\\b'+classn+'\\b','g');
    for (var i = 0; i < allTag.length; i++){
        // if (allTag[i].className.indexOf(classn) != -1) {//
        if (reg.test(allTag[i].className)) {//allTag[i].className -> 'box1 box2 blue'
            arr.push(allTag[i]);
        }
    }
    return arr;
}

// 获取星期几
function getWeek(){
    var d = new Date();
    var num = d.getDay();//0-6
    var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    return arr[num];
}

// 生成范围随机数
function randomInt(min,max){
    return Math.round(Math.random()*(max-min))+min;
}

// 生成十六进制随机颜色
function randomColor(){
    var col = '#';
    var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];//0-15
    for (var i = 0; i < 6; i++){
        var num = Math.round(Math.random()*15);//0-15
        col += arr[num];
    }
    return col;
}

// 生成6位随机验证码
function randomCode(){
    var arr = [1,1,1,1,1,1];//存储生成的随机字符
    for (var i in arr){
        do{
            var ascii = Math.round(Math.random()*(122-48))+48;// 48-122
        } while(ascii>57&&ascii<65 || ascii>90&&ascii<97);
        arr[i] = String.fromCharCode(ascii);
    }
    return arr.join('');// 返回的字符串
}

// 获取元素样式
function getStyle(dom,style){
    if (dom.currentStyle) {//IE
        return dom.currentStyle[style];
    } else {
        return getComputedStyle(dom,null)[style];
    }
}

// 添加事件监听
function addEvent(dom,type,fn){
    if (dom.attachEvent) {//IE
        dom.attachEvent('on'+type,fn);
    } else {
        dom.addEventListener(type,fn,false);
    }
}

// 获取元素到body左侧或顶部的距离（包含父级边框）
function offset(dom){
    var l = 0;
    var t = 0;
    var bdl = dom.clientLeft;//元素左边框宽度
    var bdt = dom.clientTop;//元素上边框宽度
    while(dom){
        l = l + dom.offsetLeft + dom.clientLeft;
        t = t + dom.offsetTop + dom.clientTop;
        dom = dom.offsetParent;//指向最近的定位父级
    }
    return {left: l - bdl, top: t - bdt};
}

// 缓冲运动
function bufferMove(dom,target,callback){
    dom.timer = null;
    clearInterval(dom.timer);
    dom.timer = setInterval(function (){
        // x轴运动
        var speedX = (target.left - dom.offsetLeft) / 10;//持续变化的速度
        speedX = speedX > 0 ? Math.ceil(speedX) : Math.floor(speedX);//对速度取整，避免数据丢失
        // 剩余的运动量 < 每次所走的运动量
        if (Math.abs(dom.offsetLeft - target.left) <= Math.abs(speedX)) {
            // clearInterval(dom.timer);
            dom.style.left = target.left + 'px';//设置终点
        } else {
            dom.style.left = dom.offsetLeft + speedX + 'px';
        }

        // y轴运动
        var speedY = (target.top - dom.offsetTop) / 10;//持续变化的速度
        speedY = speedY > 0 ? Math.ceil(speedY) : Math.floor(speedY);//对速度取整，避免数据丢失
        // 剩余的运动量 < 每次所走的运动量
        if (Math.abs(dom.offsetTop - target.top) <= Math.abs(speedY)) {
            clearInterval(dom.timer);
            dom.style.top = target.top + 'px';//设置终点
            callback();//回调函数
        } else {
            dom.style.top = dom.offsetTop + speedY + 'px';
        }
    },20);
}

// 获取元素
function $1(selector) {
    return document.querySelector(selector);
}
function $2(selector) {
    return document.querySelectorAll(selector);
}

烟花特效js代码

var wrap = $1('.wrap');

// 点击发射
wrap.onclick = function (ev){
    var e = ev || window.event;
    var client = {left: e.clientX, top: e.clientY};// 点击位置的坐标对象
    new Fireworks(wrap,client);//实例化一个烟花对象
}

// // 自动发射
setInterval(function (){
    var client = {
        left: randomInt(200,wrap.clientWidth-200),
        top: randomInt(50,wrap.clientHeight-140)
    };// 点击位置的坐标对象
    new Fireworks(wrap,client);//实例化一个烟花对象
},2200);

// 创建对象 
function Fireworks(wrap,client){
    this.wrap = wrap;//烟花所在的容器
    this.client = client;//烟花运动终点坐标
    this.fire = document.createElement('div');//烟花节点
    this.init();//初始化
}

// 初始化
Fireworks.prototype.init = function (){
    this.fire.className = 'fire';
    this.fire.style.left = this.client.left + 'px';//初始位置x
    this.fire.style.bottom = '0px';//初始位置y
    this.fire.style.background = randomColor();//随机颜色
    this.wrap.appendChild(this.fire);//添加到页面
    this.send();//发射
}

// 往上运动（缓冲运动）
Fireworks.prototype.send = function (){
    bufferMove(this.fire,this.client,function (){
        this.wrap.removeChild(this.fire);//运动结束，删除节点
        this.boom();// 爆炸
    }.bind(this));
}

// 烟花爆炸
Fireworks.prototype.boom = function (){
    var _this = this;
    // 创建x个烟花节点（随机20-40  for）样式、坐标、颜色
    var len = randomInt(20,40);
    for (var i = 0; i < len; i++){
        var fire = document.createElement('div');
        fire.className = 'fire';
        fire.style.left = this.client.left + 'px';
        fire.style.top = this.client.top + 'px';
        fire.style.background = randomColor();
        this.wrap.appendChild(fire);// 添加到页面
        // 运动->到终点后删除
        var pos = {
            left: randomInt(10,this.wrap.clientWidth-10),
            top: randomInt(10,this.wrap.clientHeight-100),
        };

        // 涉及同步异步问题，通过bind()传递参数
        bufferMove(fire,pos,function (){
            _this.wrap.removeChild(this);//运动结束，删除节点
        }.bind(fire));
    }
}