この記事では、JS花火の背景効果の実装方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title>別のクールなJS花火の背景効果</title>
<script type = "text/javascript">
var fireworks = function（）{
this.size = 20;
this.rise（）;
}
fireworks.prototype = {
色：function（）{
var c = ['0'、 '3'、 '6'、 '9'、 'c'、 'f'];
var t = [c [math.floor（math.random（）*100）％6]、 '0'、 'f'];
t.sort（function（）{return math.random（）> 0.5？-1：1;}）;
return '＃'+t.join（ ''）;
}、
先に：function（）{
var h = document.documentelement.clientheight-250;
return math.abs（math.floor（math.random（）*h-200））+201;
}、
firecracker：function（）{
var b = document.createelement（ 'div'）;
var w = document.documentelement.clientWidth;
b.Style.Position = 'Absolute';
b.Style.Color = this.color（）;
b.Style.Bottom = 0;
B.Style.Left = Math.Floor（Math.random（）*W）+1+'Px';
document.body.appendChild（b）;
bを返します。
}、
上昇：function（）{
var o = this.firecracker（）;
var n = this.aheight（）;
var c = this.color;
var e = this.expl;
var s = this.size;
var k = n;
var m = function（）{
o.style.bottom = parsefloat（o.style.bottom）+k*0.1+'px';
k- = k*0.1;
if（k <2）{
ClearInterval（clear）;
e（o、n、s、c）;
}
}
o.innerhtml = '。';
if（parseint（o.style.bottom）<n）{
var clear = setInterval（m、20）;
}
}、
説明：function（o、n、s、c）{
var r = n/3、ri = n/6、ri = n/9;
var r = 0、ri = 0、rii = 0;
for（var i = 0; i <s; i ++）{
var span = document.createelement（ 'span'）;
var p = document.createelement（ 'i'）;
var a = document.createelement（ 'a'）;
span.style.position = 'absolute';
span.style.fontsize = n/10+'px';
span.style.left = 0;
span.style.top = 0;
span.innerhtml = '*';
P.Style.Position = 'Absolute';
p.style.left = 0;
p.style.top = 0;
p.innerhtml = '*';
A.Style.Position = 'Absolute';
A.Style.Left = 0;
a.style.top = 0;
a.innerhtml = '*';
O.AppendChild（SPAN）;
O.AppendChild（P）;
O.AppendChild（a）;
}
functionspr（）{
r += r*0.1;
ri+= ri*0.06;
rii+= rii*0.06;
sp = o.getelementsbytagname（ 'span'）;
p = o.getelementsbytagname（ 'i'）;
a = o.getElementsByTagname（ 'a'）;
for（var i = 0; i <sp.length; i ++）{
sp [i] .style.color = c（）;
p [i] .style.color = c（）;
a [i] .style.color = c（）;
sp [i] .style.left = r*math.cos（360/s*i）+'px';
sp [i] .style.top = r*math.sin（360/s*i）+'px';
sp [i] .style.fontsize = parsefloat（sp [i] .style.fontsize）*0.96+'px';
p [i] .style.left = ri*math.cos（360/s*i）+'px';
p [i] .style.top = ri*math.sin（360/s*i）+'px';
p [i] .style.fontsize = parsefloat（sp [i] .style.fontsize）*0.96+'px';
a [i] .style.left = rii*math.cos（360/s*i）+'px';
a [i] .style.top = rii*math.sin（360/s*i）+'px';
a [i] .style.fontsize = parsefloat（sp [i] .style.fontsize）*0.96+'px';
}
r- = r*0.1;
if（r <2）{
o.innerhtml = '';
O.ParentNode.RemoveChild（O）;
ClearInterval（cleari）;
}
}
var cleari = setInterval（SPR、20）;
}
}
window.onload = function（）{
function happyNewyear（）{
新しい花火（）;
}
SetInterval（HappyNewyear、1000）;
}
</script>
<style type = "text/css">
</style>
</head>
<ボディスタイル= "背景：＃000;フォント：12pxジョージア、 'Times New Roman'、Times、Serif">
</body>
</html>
操作効果は次のとおりです。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。