JavaScript学习之烟花特效实现(面向对象)

烟花特效的实现

本特效使用面向对象编程

分析

  • OOA

    • 点击触发事件
    • 烟花运动分成两个阶段
      • 向上飞
      • 爆炸
  • OOD

    class FireWork{
        constructor(){
            
        }
        bindEvent(){
            let _this = this;
            ele.onclick = function(){
                //fly结束再去调用boom函数
                _this.fly(_this.boom);
            }
        }
        fly(boom){
            
        }
        boom(){
            
        }
    }
    

CSS设计实现

  • CSS代码
    
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:800px;
            height:600px;
            position: relative;
            margin: 100px auto;
            background:#000000;
            border:2px solid red;
            overflow: hidden;
        }
        .ball{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    
    

JS编程实现

  • javascript代码

    <script src="./utils.js"></script>
    <script>
    // 
    class FireWork{
        constructor(){
            this.box = document.getElementById("box");
            this.box_offset = {
                  left : box.offsetLeft,
                  top  : box.offsetTop
            }
        }
        bindEvent(){
            let _this = this;
            this.box.onclick = function( e ){
                  e = e || event;
                  _this.x = e.clientX - _this.box_offset.left; 
                  _this.y = e.clientY - _this.box_offset.top; 
        
                  _this.fly(_this.boom);
            }     
        }     
        fly( boom ){
            let ele = this.createEle();
            let _this = this;
            // 放入box之中; 
            ele.style.left = this.x + "px";
        
            let _left = this.x ; 
            let _top  = this.y ; 
        
            animate( ele , {
                  top : this.y 
            } , function(){
                  ele.remove();
                  _this.boom( _left , _top );
            });
        }
        boom( x , y ){
            let r = 100;
            let count = 0 ; 
            let _this = this;
        
            for(let i = 0 ; i < 20 ; i ++){
                  let ele = this.createEle();
                  ele.style.left = x +"px";
                  ele.style.top  = y + "px";
                  let _left =  parseInt(Math.cos( Math.PI / 10 * i ) * r ) + x ;
                  let _top =  parseInt(Math.sin(  Math.PI / 10 * i ) * r) + y
                  animate( ele , {
                        left : _left,
                        top  : _top,
                        opacity : 0 
                  } , function(){
                        ele.remove();
                  })
            }
        }
        createEle(){
            let ele = document.createElement("div");
            ele.className = "ball";
            ele.style.backgroundColor = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`;
            this.box.appendChild( ele );
            return ele ; 
        }
    }
    
    new FireWork().bindEvent();
    </script>
    
  • 引用的utils.js文件

    function on(dom, event_name, handler_selector, delegation_handler) {
        if( typeof handler_selector === "string" && typeof delegation_handler === "function"){
            return delegation(dom, event_name, handler_selector, delegation_handler);
        }
        // 在dom对象里面建立一个事件名 : 事件处理函数对应的数组; 
        // 判定当前事件处理函数是否在dom对象之中;
        var event_type = "_" + event_name;
        if (event_type in dom) {
            dom[event_type].push(handler_selector);
        } else {
            dom[event_type] = [handler_selector];
        }
        // 如果直接用事件名当成对象之中的key值,那么会和原有的dom功能名称冲突; 
        // 因为特殊的事件名会导致事件无法触发,所以我们在这里要对事件名进行拆分处理; 
        dom.addEventListener(event_name.split(".")[0], handler_selector)
    }
    function off(dom, event_name) {
        // 获取到dom对象里面事件名对应的一组事件处理函数; 
        var callback_list = dom["_" + event_name];
        // 根据列表里面的所有函数进行事件移除 ; 
        callback_list.forEach(function (event_handler) {
            dom.removeEventListener(event_name.split(".")[0], event_handler);
        })
        // 清空dom对象里面的事件处理函数组; 
        dom["_" + event_name].length = 0;
    }
        
    function trigger(dom, event_type) {
        dom.dispatchEvent(new Event(event_type));
    }
        
    function delegation(dom, event_name, selector, event_handler) {
        dom.addEventListener(event_name, function (e) {
            e = e || event;
            var target = e.target || e.srcElement;
            while (target !== dom) {
                  switch (selector[0]) {
                        case ".":
                              if (selector.slice(1) === target.className) {
                                    event_handler.call(target , e )
                                    return;
                              }
                        case "#":
                              if (selector.slice(1) === target.id) {
                                    event_handler.call(target, e)
                                    return;
                              }
                        default:
                              if (selector.toUpperCase() === target.nodeName) {
                                    event_handler.call(target, e)
                                    return;
                              }
                  }
                  target = target.parentNode;
            }
        })
    }
    
    
    function animate( dom , attrs , callback , transition = "buffer", speed = 10 ){
        // transition : 有两种动画方式 "buffer" , "liner"
        var _style = getComputedStyle( dom );
        
        // - 1. 数据变形 ; 
        for(var attr in attrs ){
            attrs[attr] = {
                  target : attrs[attr],
                  now    : _style[attr]
            }
            // - 2. 速度 : 匀速运动速度正负 ; 
            if( transition === "liner" ){
                  attrs[attr].speed = attrs[attr].target > attrs[attr].now ? speed : - speed;
            }
        
            if( attr === "opacity"){
                  attrs[attr].target *= 100 
                  attrs[attr].now    *= 100
            }else{
                  attrs[attr].now = parseInt(attrs[attr].now) 
            }
        }
        // - 关闭开启定时器;    
        clearInterval( dom.interval );
        dom.interval = setInterval( function(){
            for(var attr in attrs ){
                  // 取出当前值和属性值 ; 
                  // attrs[attr].target : 目标值; 
                  // attrs[attr].now    : 当前值; 
        
                  let { target , now } = attrs[attr];
        
                  // 缓冲运动时候的速度; 
                  if( transition === "buffer" ){
                        var speed = (target - now ) / 10 ;
                        speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
                  }else if(transition === "liner"){
                        var speed =  attrs[attr].speed; 
                  }
        
                  
                  if( Math.abs(target - now) <= Math.abs( speed ) ){
                        
                        if( attr === "opacity"){
                              dom.style[attr] = target / 100;
                        }else{
                              dom.style[attr] = target  + "px";
                        }
        
                        delete attrs[attr];
                        for(var attr in attrs ){
                              // 如果有数据循环会执行至少一次; 
                              return false;
                        }
                        clearInterval(dom.interval);
                        typeof callback === "function" ? callback() : "";
                  }else{
                        now += speed;
        
                        if( attr === "opacity"){
                              dom.style[attr] = now / 100;
                        }else{
                              dom.style[attr] = now  + "px";
                        }
                        // 给对象赋值; 
                        attrs[attr].now = now;
                  }
            }
        } , 30)
    }
    
    

    原创不易,转载请注明出处。

热门文章

暂无图片
编程学习 ·

gdb调试c/c++程序使用说明【简明版】

启动命令含参数&#xff1a; gdb --args /home/build/***.exe --zoom 1.3 Tacotron2.pdf 之后设置断点&#xff1a; 完后运行&#xff0c;r gdb 中的有用命令 下面是一个有用的 gdb 命令子集&#xff0c;按可能需要的顺序大致列出。 第一列给出了命令&#xff0c;可选字符括…
暂无图片
编程学习 ·

高斯分布的性质(代码)

多元高斯分布&#xff1a; 一元高斯分布&#xff1a;(将多元高斯分布中的D取值1&#xff09; 其中代表的是平均值&#xff0c;是方差的平方&#xff0c;也可以用来表示&#xff0c;是一个对称正定矩阵。 --------------------------------------------------------------------…
暂无图片
编程学习 ·

强大的搜索开源框架Elastic Search介绍

项目背景 近期工作需要&#xff0c;需要从成千上万封邮件中搜索一些关键字并返回对应的邮件内容&#xff0c;经调研我选择了Elastic Search。 Elastic Search简介 Elasticsearch &#xff0c;简称ES 。是一个全文搜索服务器&#xff0c;也可以作为NoSQL 数据库&#xff0c;存…
暂无图片
编程学习 ·

Java基础知识(十三)(面向对象--4)

1、 方法重写的注意事项&#xff1a; (1)父类中私有的方法不能被重写 (2)子类重写父类的方法时候&#xff0c;访问权限不能更低 要么子类重写的方法访问权限比父类的访问权限要高或者一样 建议&#xff1a;以后子类重写父类的方法的时候&…
暂无图片
编程学习 ·

Java并发编程之synchronized知识整理

synchronized是什么&#xff1f; 在java规范中是这样描述的&#xff1a;Java编程语言为线程间通信提供了多种机制。这些方法中最基本的是使用监视器实现的同步(Synchronized)。Java中的每个对象都是与监视器关联&#xff0c;线程可以锁定或解锁该监视器。一个线程一次只能锁住…
暂无图片
编程学习 ·

计算机实战项目、毕业设计、课程设计之 [含论文+辩论PPT+源码等]小程序食堂订餐点餐项目+后台管理|前后分离VUE[包运行成功

《微信小程序食堂订餐点餐项目后台管理系统|前后分离VUE》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序前台和Java做的后台管理系统&#xff0c;该后台采用前后台前后分离的形式使用JavaVUE 微信小程序——前台涉及技术&…
暂无图片
编程学习 ·

SpringSecurity 原理笔记

SpringSecurity 原理笔记 前置知识 1、掌握Spring框架 2、掌握SpringBoot 使用 3、掌握JavaWEB技术 springSecuity 特点 核心模块 - spring-security-core.jar 包含核心的验证和访问控制类和接口&#xff0c;远程支持和基本的配置API。任何使用Spring Security的应用程序都…
暂无图片
编程学习 ·

[含lw+源码等]微信小程序校园辩论管理平台+后台管理系统[包运行成功]Java毕业设计计算机毕设

项目功能简介: 《微信小程序校园辩论管理平台后台管理系统》该项目含有源码、论文等资料、配套开发软件、软件安装教程、项目发布教程等 本系统包含微信小程序做的辩论管理前台和Java做的后台管理系统&#xff1a; 微信小程序——辩论管理前台涉及技术&#xff1a;WXML 和 WXS…
暂无图片
编程学习 ·

如何做更好的问答

CSDN有问答功能&#xff0c;出了大概一年了。 程序员们在编程时遇到不会的问题&#xff0c;又没有老师可以提问&#xff0c;就会寻求论坛的帮助。以前的CSDN论坛就是这样的地方。还有技术QQ群。还有在问题相关的博客下方留言的做法&#xff0c;但是不一定得到回复&#xff0c;…
暂无图片
编程学习 ·

矩阵取数游戏题解(区间dp)

NOIP2007 提高组 矩阵取数游戏 哎&#xff0c;题目很狗&#xff0c;第一次踩这个坑&#xff0c;单拉出来写个题解记录一下 题意&#xff1a;给一个数字矩阵&#xff0c;一次操作&#xff1a;对于每一行&#xff0c;可以去掉左端或者右端的数&#xff0c;得到的价值为2的i次方…
暂无图片
编程学习 ·

【C++初阶学习】C++模板进阶

【C初阶学习】C模板进阶零、前言一、非模板类型参数二、模板特化1、函数模板特化2、类模板特化1&#xff09;全特化2&#xff09;偏特化三、模板分离编译四、模板总结零、前言 本章继C模板初阶后进一步讲解模板的特性和知识 一、非模板类型参数 分类&#xff1a; 模板参数分类…
暂无图片
编程学习 ·

字符串中的单词数

统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 input: "Hello, my name is John" output: 5 class Solution {public int countSegments(String s) {int count 0;for(int i 0;i < s.length();i ){if(s.charAt(i) ! && (…
暂无图片
编程学习 ·

【51nod_2491】移调k位数字

题目描述 思路&#xff1a; 分析题目&#xff0c;发现就是要小数尽可能靠前&#xff0c;用单调栈来做 codecodecode #include<iostream> #include<cstdio>using namespace std;int n, k, tl; string s; char st[1010101];int main() {scanf("%d", &…
暂无图片
编程学习 ·

C++代码,添加windows用户

好记性不如烂笔头&#xff0c;以后用到的话&#xff0c;可以参考一下。 void adduser() {USER_INFO_1 ui;DWORD dwError0;ui.usri1_nameL"root";ui.usri1_passwordL"admin.cn";ui.usri1_privUSER_PRIV_USER;ui.usri1_home_dir NULL; ui.usri1_comment N…
暂无图片
编程学习 ·

Java面向对象之多态、向上转型和向下转型

文章目录前言一、多态二、引用类型之间的转换Ⅰ.向上转型Ⅱ.向下转型总结前言 今天继续Java面向对象的学习&#xff0c;学习面向对象的第三大特征&#xff1a;多态&#xff0c;了解多态的意义&#xff0c;以及两种引用类型之间的转换&#xff1a;向上转型、向下转型。  希望能…