JS烟花案例
html代码部分
<!DOCTYPE html>
<!--
* @Descripttion:
* @version:
* @Author: 小小荧
* @Date: 2020-03-18 19:15:15
* @LastEditors: 小小荧
* @LastEditTime: 2020-03-18 20:14:28
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="./js/animate.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/index.js"></script>
<script>
let container_ele = document.querySelector(".container");
container_ele.addEventListener("click", function(evt){
var e = evt || event;
new FireWork(e.offsetX, e.offsetY, ".container");
})
</script>
</body>
</html>
JS代码运动函数
/*
* @Descripttion:
* @version:
* @Author: 小小荧
* @Date: 2020-03-17 18:01:21
* @LastEditors: 小小荧
* @LastEditTime: 2020-03-18 19:14:55
*/
/**
* 多属性的动画函数
* @param {*} ele 需要运动的节点
* @param {*} attr_options 传入的是一个需要运动的属性包括运动的目标值，操作的节点属性
* @param {*} timefn 运动的形式，默认是缓冲运动
* @param {*} speed 运动的速度
*/
function animate(ele, attr_options, callback, timefn = "swing", speed = 5) {
// 我们需要把传入的options处理成
/*
{“width : {
target : 200,
iNow : 100
}}这个形式
*/
for (var attr in attr_options) {
attr_options[attr] = {
target: attr === "opacity" ? parseInt(attr_options[attr] * 100) : attr_options[attr],
// 需要计算得到
iNow: attr === "opacity" ? parseInt(getComputedStyle(ele)[attr] * 100) : parseInt(getComputedStyle(ele)[attr])
}
}
// 为了防止每个节点的定时器冲突，每次进入的时候我们需要先清理下节点的定时器
clearInterval(ele.timer);
// 然后再去设置定时器
ele.timer = setInterval(function () {
// 因为是多属性运动，我们首先循环遍历每一个属性
for (var attr in attr_options) {
var target = attr_options[attr].target;
var iNow = attr_options[attr].iNow;
// 计算speed 判断是不是缓冲运动
if (timefn === "swing") {
speed = (target - iNow) / 20;
// 为了防止速度无法达到一个整数
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
}
// 判断是不是匀速运动
else if (timefn === "liner") {
speed = attr_options[attr].iNow < attr_options[attr].target ? Math.abs(speed) : -Math.abs(speed);
}
// 运动之中条件的判断
if (Math.abs(target - iNow) <= Math.abs(speed)) {
if (attr === "opacity") {
ele.style[attr] = target / 100;
} else {
ele.style[attr] = target + "px";
}
// 每次一个属性运动完成之后我们就直接将它删除
delete attr_options[attr];
// 每次都去循环看一下还有没有属性需要操作
for (var num in attr_options) {
return false;
}
// 清理定时器 因为我们是一个定时器绑定多个属性操作所以我们需要保证所有的属性都完成之后我们才可以将定时器清除
clearInterval(ele.timer);
// 等结束之后我们需要判断这个回到函数是函数我们就回调
typeof callback === "function" ? callback() : ""
} else {
attr_options[attr].iNow += speed;
if (attr === "opacity") {
ele.style[attr] = attr_options[attr].iNow / 100;
} else {
ele.style[attr] = attr_options[attr].iNow + "px";
}
}
}
}, 30);
}
JS代码核心主业务代码
/*
* @Descripttion:
* @version:
* @Author: 小小荧
* @Date: 2020-03-18 19:16:48
* @LastEditors: 小小荧
* @LastEditTime: 2020-03-18 20:12:07
*/
class FireWork {
// 构造器
/**
*
* @param {*} x x轴坐标
* @param {*} y y轴坐标
* @param {*} seletor 选择器名
*/
constructor(x, y, seletor) {
// 父容器的节点
this.main = document.querySelector(seletor);
this.init(x, y);
}
/**
* 初始化方法
* @param {*} x x的坐标
* @param {*} y y的坐标
*/
init(x, y) {
this.x = x;
this.y = y;
// 创建的烟花的节点
this.ele = this.createFireWorkEle();
// 运动的最大left值
this.left_max = this.main.offsetWidth - this.ele.offsetWidth;
// 运动的最大的top值
this.top_max = this.main.offsetHeight - this.ele.offsetHeight;
// 设置烟花的开始颜色
this.randomColor(this.ele);
// 烟花开始运动
this.fireworkUp(this.ele);
}
/**
* 创建烟花的元素
*/
createFireWorkEle() {
// 创建节点
let ele = document.createElement("div");
// 设置类名
ele.className = "fire";
// 在父容器追加节点
this.main.appendChild(ele);
return ele;
}
/**
*
* 烟花运动的方法
* @param {*} ele 运动的这个烟花
*/
fireworkUp(ele) {
// 设置left
ele.style.left = this.x + "px";
// 烟花向上的运动我们使用animate动画
animate(ele, {
top: this.y,
}, () => {
// 等到这个烟花运动结束之后呢我们需要将这个烟花给删除了
ele.parentNode.removeChild(ele);
// 结束之后烟花开始爆炸
this.fireworkBlast();
});
}
/**
* 烟花爆炸的方法
*/
fireworkBlast() {
// 我们设置爆炸的数量为20
for (let i = 0; i < 20; i++) {
// 我们需要重新创建烟花的元素
let ele = this.createFireWorkEle();
// 给元素设置随机背景颜色和left，top，圆角属性值
this.randomColor(ele);
ele.style.left = this.x + "px";
ele.style.top = this.y + "px";
ele.style.borderRadius = "50%";
// 然后我们需要让这些元素开始运动,先获取随机坐标带你
animate(ele, this.randomPos(), () => {
// 删除烟花
ele.parentNode.removeChild(ele)
});
}
}
/**
* 随机获取坐标点
*/
randomPos() {
return {
left: Math.round(Math.random() * this.left_max),
top: Math.round(Math.random() * this.top_max)
}
}
/**
*
* 随机背景颜色
* @param {*} ele 小烟花的元素
*/
randomColor(ele) {
return ele.style.backgroundColor = utils.randomColor();
}
}
utils的随机生成颜色的函数
let randomColor = function () {
let res = "#";
for (let i = 0; i < 6; i++) {
res += parseInt(Math.random() * 10).toString(16);
}
return res;
}
JS烟花案例的更多相关文章
- JS烟花案例优化版
不明白为什么是烟花优化版本的先参考作者的烟花基础版本 烟花优化版本主要实在优化爆炸的范围和运动上做了优化,爆炸范围我们采用已圆的爆炸方式,以鼠标点击的位置为圆形爆炸的烟花效果 <!DOCTYPE ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- js计算器案例
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- 正則表達式--js使用案例
前言:在前端页面使用中.遇到日期格式的验证.開始使用了一款表单控件验证.可是不兼容!!并且使用起来还受到非常大约束.所以就决定自己写原生js. 为了完毕日期格式的验证.第一步,当然是学会使用正則表達式 ...
- JS小案例：循环间隔重复变色
在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...
- JavaScript中的面向对象编程，详解原型对象及prototype，constructor，proto，内含面向对象编程详细案例（烟花案例）
面向对象编程: 面向:以什么为主,基于什么模式 对象:由键值对组成,可以用来描述事物,存储数据的一种数据格式 编程:使用代码解决需求 面向过程编程: 按照我们分析好的步骤,按步 ...
- node.js(小案例)_实现学生信息增删改
一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...
- node.js小案例_留言板
一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示: 2.案列源码:https://github.com/45612 ...
- node.js 爬虫案例
本案例是爬的一部小说,爬取并存在本地 使用了动态浏览器头部信息,和 动态ip代理, 这2个方式可以有效的伪装自己,不至于被反爬,然后拉黑,之前已有记录,浏览器头部信息,也记录的有, app.js im ...
随机推荐
- JS 获取一段时间内的工作时长小时数
本来想是想找轮子的,但是并没有找到能用的,多数都是问题很大,所以就自己写了一个 需求说明 支持自选时间段,即开始时间与结束时间根据用户的上班及下班时间判定返回小时数 技术栈 moment.js 思考过 ...
- 前端每日实战：55# 视频演示如何用纯 CSS 创作一个太阳、地球、月亮的运转模型
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RJjQYY 可交互视频 此视频是可 ...
- java中的对象 方法 引用 等一些抽象的概念是什么意思呢？
2020-03-14 最近这一段时间有点忙,好久都没有更新博客了,之后我会一直坚持下去的,和大家一同进步的. 这段时间一直在学java,相信刚开始学习java的小白,刚开始接触那么些抽象的概念一定和我 ...
- BeetleX.FastHttpApi之测试插件集成
说到Webapi测试工具相信很多人想起Swagger,它可以非常方便地集成到项目中并进行项目Webapi接口测试.而BeetleX.FastHttpApi在新版本中也提供类似的插件,只需要引用这个插件 ...
- pyppepeer淘宝登录
代码: import time import random import asyncio import pyppeteer class LoginTaoBao: """ ...
- python3.4.3 连接Oracle生成报表并发送邮件
python很简单,又很实用.当有需求时用起来会更有方向,大可不必从语法.循环等基础看起. 由于工作需要,每天要拉一份报表发给业务的同事,先是用SSIS做了个包部署到服务器上,每天定时拉报表发邮件给同 ...
- Git&sourceTree软件安装、使用说明及遇到问题解决
一.软件版本 1.Git版本为1.9.5 2.Source版本为1.5.2 二.软件安装步骤 1.Git安装步骤 1)双击Git安装文件进入下图界面,单击Next 2)继续Next 3)进入Selec ...
- 标题 发布状态 评论数 阅读数 操作 操作 CNN目标检测系列算法发展脉络简析——学习笔记（三）：Fast R-CNN
最近两周忙着上网课.投简历,博客没什么时间写,姑且把之前做的笔记放上来把... 下面是我之前看论文时记的笔记,之间copy上来了,内容是Fast R-CNN的,以后如果抽不出时间写博客,就放笔记上来( ...
- BNP Paribas Cardif Claims Management
2月20日: 查看任务介绍,二分类问题,评价标准logloss 下载数据 2月21~27日: 查看数据组成,标识分类变量.离散变量.连续变量. 发现连续数据有大量非随机空缺(占总量一半),主要集中在v ...
- 五分钟了解Semaphore
一.前言 多个线程之间的同步,我们会用到Semaphore,翻译成中文就是信号量.使用Semaphore可以限制多个线程对同一资源的访问.我们先看下C#中对Semaphore的定义,如下图: 翻译成中 ...