烟花特效
- 点击创建一颗烟花
获取点击坐标对象
实例化一个烟花对象 - 烟花爆炸
创建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));
}
}