JavaScript String 简易版烟花
OOA：烟花，点击出现烟花，运动到某处，炸开小烟花，运动到随机位置，删除
1.创建主体烟花，设置样式，位置
2.开始运动，运动结束
3.删除主体烟花，创建小烟花
4.立即运动，到终点，删除小烟花
最后的小烟花在炸开的时候move移动时
在move的回调函数中，找不到每个div：
原因：异步：for循环立即执行，回到函数等待执行，回调函数执行时，循环已经结束多时，div已经被重复覆盖
解决方案：
1.提前定义数组保存，结束时根据数组删除
2.使用bind将div强行传进去
3.使用匿名函数生成新的作用域，保存div
4.利用let触发块级作用域，保存div
OOD:
以下是四种解决方案
1.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
background: #333;
height:500px;
800px;
margin:10px auto;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.fire{
height: 10px;
10px;
position: absolute;
bottom: 0;
}
.small-fire{
height: 10px;
10px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
// OOA:点击box出现
// 1.做大烟花
// 2.运动,停止
// 3.大烟花消失,小烟花出现
// 4.小烟花散开,消失
// OOP:
function fire(ee){
this.x=ee.x;
this.y=ee.y;
this.box=ee.parent;
this.a();
}
fire.prototype.a=function(){
// 1.做大烟花
this.ele=document.createElement("div");
this.ele.className="fire";
this.ele.style.background=randomColor();
this.ele.style.left=this.x+"px";
this.box.appendChild(this.ele);
this.arr=[];
this.b();
}
fire.prototype.b=function(){
// 2.运动,停止
move(this.ele,{
top:this.y,
left:this.x
},function(){
this.ele.remove();
// 小烟花出现
this.c();
}.bind(this))
}
fire.prototype.c=function(){
// 3.大烟花消失,小烟花出现
var num=random(10,30);
for(var i=0;i<num;i++){
var div=document.createElement("div");
div.className="small-fire";
div.style.left=this.x+"px";
div.style.top=this.y+"px";
div.style.background=randomColor();
this.box.appendChild(div);
this.arr.push(div);
// 4.小烟花散开,消失
var h=random(0,this.box.offsetHeight-div.offsetHeight);
var w=random(0,this.box.offsetWidth-div.offsetWidth);
move(div,{
top:h,
left:w
},()=>{
for(var i=0;i<this.arr.length;i++){
this.arr[i].remove();
}
})
}
}
var obox=document.querySelector(".box");
obox.onclick=function(eve){
var e=eve||window.event;
new fire({
x:e.offsetX,
y:e.offsetY,
parent:this
})
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}
function move(ele,json,callback){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
</script>
</html>
2.bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
background: #333;
height:500px;
800px;
margin:10px auto;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.fire{
height: 10px;
10px;
position: absolute;
bottom: 0;
}
.small-fire{
height: 10px;
10px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
// OOA:点击box出现
// 1.做大烟花
// 2.运动,停止
// 3.大烟花消失,小烟花出现
// 4.小烟花散开,消失
// OOP:
function fire(op){
// 大烟花位置
this.x=op.x;
this.y=op.y;
this.box=op.parent;
this.a();
}
fire.prototype.a =function() {
// 1.做大烟花
this.ele=document.createElement("div");
this.ele.className="fire";
this.ele.style.left=this.x+"px";
this.ele.style.background=randomColor();
this.box.appendChild(this.ele);
this.b();
}
fire.prototype.b=function(){
// 2.运动,停止
move(this.ele,{
top:this.y
},function(){
this.ele.remove();
// 小烟花出现
this.c();
}.bind(this))
}
fire.prototype.c=function(){
// 3.大烟花消失,小烟花出现
var num=random(10,30);
for(var i=0;i<num;i++){
var div=document.createElement("div");
div.className="small-fire";
div.style.background=randomColor();
div.style.top=this.y+"px";
div.style.left=this.x+"px";
this.box.appendChild(div);
var h=random(0,this.box.offsetHeight-div.offsetHeight);
var w=random(0,this.box.offsetWidth-div.offsetWidth);
move(div,{
top:h,
left:w
},function(){
this.remove();
}.bind(div));
}
}
var obox=document.querySelector(".box");
obox.onclick=function(eve){
var e=eve||window.event;
new fire({
x:e.offsetX,
y:e.offsetY,
parent:this
})
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}
function move(ele,json,callback){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
</script>
</html>
3.匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
background: #333;
height:500px;
800px;
margin:10px auto;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.fire{
height: 10px;
10px;
position: absolute;
bottom: 0;
}
.small-fire{
height: 10px;
10px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
// OOA:点击box出现
// 1.做大烟花
// 2.运动,停止
// 3.大烟花消失,小烟花出现
// 4.小烟花散开,消失
// OOP:
function fire(op){
// 大烟花位置
this.x=op.x;
this.y=op.y;
this.box=op.parent;
this.a();
}
fire.prototype.a =function() {
// 1.做大烟花
this.ele=document.createElement("div");
this.ele.className="fire";
this.ele.style.left=this.x+"px";
this.ele.style.background=randomColor();
this.box.appendChild(this.ele);
this.b();
}
fire.prototype.b=function(){
// 2.运动,停止
move(this.ele,{
top:this.y
},function(){
this.ele.remove();
// 小烟花出现
this.c();
}.bind(this))
}
fire.prototype.c=function(){
// 3.大烟花消失,小烟花出现
var num=random(10,30);
for(var i=0;i<num;i++){
var div=document.createElement("div");
div.className="small-fire";
div.style.background=randomColor();
div.style.top=this.y+"px";
div.style.left=this.x+"px";
this.box.appendChild(div);
var h=random(0,this.box.offsetHeight-div.offsetHeight);
var w=random(0,this.box.offsetWidth-div.offsetWidth);
;(function(div){move(div,{
top:h,
left:w
},function(){
div.remove();
})
})(div);
}
}
var obox=document.querySelector(".box");
obox.onclick=function(eve){
var e=eve||window.event;
new fire({
x:e.offsetX,
y:e.offsetY,
parent:this
})
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}
function move(ele,json,callback){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
</script>
</html>
4.let
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
background: #333;
height:500px;
800px;
margin:10px auto;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.fire{
height: 10px;
10px;
position: absolute;
bottom: 0;
}
.small-fire{
height: 10px;
10px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
OOA：烟花，点击出现烟花，运动到某处，炸开小烟花，运动到随机位置，删除
1.创建主体烟花，设置样式，位置
2.开始运动，运动结束
3.删除主体烟花，创建小烟花
4.立即运动，到终点，删除小烟花
// OOD：
// function Fire(){
// // 。。。
// // 1.创建主体烟花，设置样式，位置
// this.init()
// }
// Fire.prototype.init = function(){
// // 主体烟花，设置样式，位置
// // 2.开始运动，运动结束
// this.animate()
// }
// Fire.prototype.animate = function(){
// // 开始运动。。。
// // 删除主体烟花
// // 3.创建小烟花
// this.createSmall()
// }
// Fire.prototype.createSmall = function(){
// // 创建小烟花,运动，删掉
// }
function Fire(h){
// 1.创建主体烟花，设置样式，位置
this.x=h.x;
this.y=h.y;
this.box=h.parent;
this.a();
}
Fire.prototype.a = function(){
// 主体烟花，设置样式，位置
this.ele=document.createElement("div");
this.ele.className="fire";
this.ele.style.left=this.x+"px";
this.ele.style.background=randomColor();
this.box.appendChild(this.ele);
// 2.开始运动，运动结束
this.b();
}
Fire.prototype.b = function(){
// 开始运动。。。
move(this.ele,{top:this.y},function(){
// 删除主体烟花
this.ele.remove();
// 3.创建小烟花
this.c();
}.bind(this))
}
Fire.prototype.c = function(){
// 创建小烟花,运动，删掉
var num=random(10,20);
for(var i=0;i<num;i++){
let div=document.createElement("div");
div.className="small-fire";
div.style.left=this.x+"px";
div.style.top=this.y+"px";
div.style.background=randomColor();
this.box.appendChild(div);
var h=random(0,this.box.offsetHeight-div.offsetHeight)
var w=random(0,this.box.offsetWidth-div.offsetWidth);
move(div,{top:h,left:w},function(){
div.remove();
})
}
}
var obox=document.querySelector(".box");
obox.onclick=function(eve){
var e=eve||window.event;
new Fire({
x:e.offsetX,
y:e.offsetY,
parent:this
});
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}
function move(ele,json,callback){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
</script>
</html>
圆烟花
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
background: #333;
height:500px;
800px;
margin:10px auto;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.fire{
height: 10px;
10px;
position: absolute;
bottom: 0;
}
.small-fire{
height: 10px;
10px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
// OOA：烟花，点击出现烟花，运动到某处，炸开小烟花，运动到随机位置，删除
// 1.创建主体烟花，设置样式，位置
// 2.开始运动，运动结束
// 3.删除主体烟花，创建小烟花
// 4.立即运动，到终点，删除小烟花
function Fire(h){
// 1.创建主体烟花，设置样式，位置
this.x=h.x;
this.y=h.y;
this.box=h.parent;
this.a();
}
Fire.prototype.a = function(){
// 主体烟花，设置样式，位置
this.ele=document.createElement("div");
this.ele.className="fire";
this.ele.style.left=this.x+"px";
this.ele.style.background=randomColor();
this.box.appendChild(this.ele);
// 2.开始运动，运动结束
this.b();
}
Fire.prototype.b = function(){
// 开始运动。。。
move(this.ele,{top:this.y},function(){
// 删除主体烟花
this.ele.remove();
// 3.创建小烟花
this.c();
}.bind(this))
}
Fire.prototype.c = function(){
// 创建小烟花,运动，删掉
var num=random(10,20);
var r=random(100,250);
for(var i=0;i<num;i++){
let div=document.createElement("div");
div.className="small-fire";
div.style.left=this.x+"px";
div.style.top=this.y+"px";
div.style.background=randomColor();
this.box.appendChild(div);
var h=parseInt(Math.sin(Math.PI/180*(360/num*i))*r)+this.y;
var w=parseInt(Math.cos(Math.PI/180*(360/num*i))*r)+this.x;
move(div,{top:h,left:w},function(){
div.remove();
})
}
}
var obox=document.querySelector(".box");
obox.onclick=function(eve){
var e=eve||window.event;
new Fire({
x:e.clientX-obox.offsetLeft,
y:e.clientY-obox.offsetTop,
parent:this
});
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}
function move(ele,json,callback){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in json){
var iNow = parseInt(getStyle(ele,i));
var speed = (json[i] - iNow)/6;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != json[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
callback && callback();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
</script>
</html>