บทความนี้อธิบายถึงวิธีการใช้งานของเอฟเฟกต์พื้นหลังของ JS Firework แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! 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 Firework อื่น ๆ </title>
<script type = "text/javascript">
VAR Fireworks = function () {
this.size = 20;
this.rise ();
-
Fireworks.prototype = {
สี: ฟังก์ชั่น () {
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;
-
FireCracker: function () {
var b = document.createElement ('div');
var w = document.documentElement.ClientWidth;
b.style.position = 'สัมบูรณ์';
b.style.color = this.color ();
b.style.bottom = 0;
b.style.left = math.floor (math.random ()*w)+1+'px';
document.body.appendchild (b);
กลับ B;
-
Rise: 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;
ถ้า (k <2) {
ClearInterval (ชัดเจน);
e (o, n, s, c);
-
-
o.innerhtml = '.';
if (parseint (o.style.bottom) <n) {
var clear = setInterval (m, 20);
-
-
expl: ฟังก์ชั่น (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 = 'สัมบูรณ์';
span.style.fontsize = n/10+'px';
span.style.left = 0;
span.style.top = 0;
span.innerhtml = '*';
p.style.position = 'สัมบูรณ์';
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 (ช่วง);
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] .style.fontsize = parsefloat (sp [i] .style.fontsize)*0.96+'px';
-
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, 1,000);
-
</script>
<style type = "text/css">
</style>
</head>
<body style = "พื้นหลัง:#000; ตัวอักษร: 12px Georgia, 'Times New Roman', Times, Serif">
</body>
</html>
เอฟเฟกต์การดำเนินการมีดังนี้:
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน