JavaScript String 简易版烟花

Posted 2022-10-04 li923

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript String 简易版烟花相关的知识，希望对你有一定的参考价值。

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;
width:800px;
margin:10px auto;
border: 1px solid red;
position: relative;
overflow: hidden;

.fire
height: 10px;
width: 10px;
position: absolute;
bottom: 0;

.small-fire
height: 10px;
width: 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;
width:800px;
margin:10px auto;
border: 1px solid red;
position: relative;
overflow: hidden;

.fire
height: 10px;
width: 10px;
position: absolute;
bottom: 0;

.small-fire
height: 10px;
width: 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);

3.匿名函数

</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);

4.let

</style>

</head>
<body>
<div class="box"></div>
</body>

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);

技术图片

圆烟花

</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);

技术图片

以上是关于JavaScript String 简易版烟花的主要内容，如果未能解决你的问题，请参考以下文章

简易版的新闻应用

JS烟花案例优化版

JavaScript 简易版自动轮播手动轮播菜鸟交流

java .简易版的DVD管理系统

ShaderJoy —— 用 Shader 绘制酷炫的爱心烟花GLSL详细版

Javascript学习--烟花