تصف هذه المقالة طريقة تنفيذ تأثير خلفية الألعاب النارية JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> تأثير خلفية ألعاب نارية أخرى رائعة </title>
<script type = "text/javaScript">
var fireworks = function () {
this.size = 20 ؛
this.rise () ؛
}
الألعاب النارية. النموذج = {
اللون: وظيفة () {
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 ؛}) ؛
إرجاع '#'+t.join ('') ؛
} ،
إلى الأمام: وظيفة () {
var h = document.documentElement.clientheight-250 ؛
Return Math.ABS (Math.Floor (Math.Random ()*H-200))+201 ؛
} ،
الالعاب النارية: function () {
var b = document.createElement ('div') ؛
var w = document.documentElement.ClientWidth ؛
B.Style.position = 'aboort' ؛
B.Style.Color = this.color () ؛
B.Style.Bottom = 0 ؛
B.Style.Left = Math.Floor (Math.Random ()*W)+1+'px' ؛
document.body.appendchild (b) ؛
العودة ب ؛
} ،
Rise: Function () {
var o = this.firicracker () ؛
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 ؛
إذا (k <2) {
ClearInterval (واضح) ؛
E (O ، N ، S ، C) ؛
}
}
o.innerhtml = '.' ؛
if (parseint (o.style.bottom) <n) {
var clear = setInterval (m ، 20) ؛
}
} ،
Expl: Function (O ، N ، S ، C) {
var r = n/3 ، ri = n/6 ، ri = n/9 ؛
var r = 0 ، ri = 0 ، rii = 0 ؛
لـ (var i = 0 ؛ i <s ؛ i ++) {
var span = document.createElement ('span') ؛
var p = document.createElement ('i') ؛
var a = document.createElement ('a') ؛
span.style.position = 'aboRALUTE' ؛
span.style.fontsize = n/10+'px' ؛
span.style.left = 0 ؛
span.style.top = 0 ؛
span.innerhtml = '*' ؛
p.style.position = 'absomute' ؛
p.style.left = 0 ؛
p.style.top = 0 ؛
p.innerhtml = '*' ؛
A.Style.position = 'aboort' ؛
A.Style.Left = 0 ؛
A.Style.top = 0 ؛
A.InnerHtml = '*' ؛
O.AppendChild (span) ؛
O.AppendChild (P) ؛
O.AppendChild (A) ؛
}
وظيفة spr () {
r += r*0.1 ؛
ri+= ri*0.06 ؛
rii+= rii*0.06 ؛
sp = o.getElementSbyTagName ('span') ؛
p = o.getElementsByTagName ('i') ؛
a = o.getElementsByTagName ('a') ؛
لـ (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]
}
r- = r*0.1 ؛
إذا (r <2) {
o.innerhtml = '' ؛
O.ParentNode.removechild (O) ؛
ClearInterval (Cleari) ؛
}
}
var cleari = setInterval (spr ، 20) ؛
}
}
window.onload = function () {
وظيفة HappyNewYear () {
الألعاب النارية الجديدة () ؛
}
setInterval (HappyNewYear ، 1000) ؛
}
</script>
<type type = "text/css">
</style>
</head>
<body style = "Background:#000 ؛ Font: 12px Georgia ،" Times New Roman "، Times ، Serif">
</body>
</html>
تأثير العملية على النحو التالي:
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.