JS fireworks based on object-oriented implementation

Last Update:2015-05-08 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article mainly introduces the fireworks Effect of JS based on object-oriented implementation, and involves the use of javascript object-oriented technology. For more information, see

The example in this article describes the fireworks Effect of JS based on object-oriented implementation. Share it with you for your reference. The specific implementation method is as follows:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"

Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<Head>

<Title> js fireworks effect (object-oriented edition) </title>

Html, body {overflow: hidden ;}

Body, div, p {margin: 0; padding: 0 ;}

Body {background: #000; font: 12px/1.5 arial; color: # 7A7A7A ;}

A {text-decoration: none; outline: none ;}

# Tips, # copyright {position: absolute; width: 100%; height: 50px; text-align: center; background: #171717; border: 2px solid #484848 ;}

# Tips {top: 0; border-width: 0 0 2px ;}

# Tips a {font: 14px/30px arial; color: # FFF; background: # F06; display: inline-block; margin: 10px 5px 0; padding: 0 15px; border-radius: 15px ;}

# Tips a. active {background: # FE0000 ;}

# Copyright {bottom: 0; line-height: 50px; border-width: 2px 0 0 ;}

# Copyright a {color: # FFF; background: # 7A7A7A; padding: 2px 5px; border-radius: 10px ;}

# Copyright a: hover {background: # F90 ;}

P {position: absolute; top: 55px; width: 100%; text-align: center ;}

</Style>

Var fgm = {

On: function (element, type, handler ){

Return element. addEventListener? Element. addEventListener (type, handler, false): element. attachEvent ("on" + type, handler)

Un: function (element, type, handler ){

Return element. removeEventListener? Element. removeEventListener (type, handler, false): element. detachEvent ("on" + type, handler)

Bind: function (object, handler ){

Return function (){

Return handler. apply (object, arguments)

}

RandomRange: function (lower, upper ){

Return Math. floor (Math. random () * (upper-lower + 1) + lower)

GetRanColor: function (){

Var str = this. randomRange (0, 0 xFFFFFF). toString (16 );

While (str. length <6) str = "0" + str;

Return "#" + str

}

};

// Initialize the object

Function FireWorks (){

This. type = 0;

This. timer = null;

This. fnManual = fgm. bind (this, this. manual)

}

FireWorks. prototype = {

Initialize: function (){

ClearTimeout (this. timer );

Fgm. un (document, "click", this. fnManual );

Switch (this. type ){

Case 1:

Fgm. on (document, "click", this. fnManual );

Break;

Case 2:

This. auto ();

Break;

};

Manual: function (event ){

Event = event | window. event;

This. _ create __({

X: event. clientX,

Y: event. clientY

});

Auto: function ()

{

Var that = this;

That. timer = setTimeout (function (){

That. _ create __({

X: fgm. randomRange (50, document.doc umentElement. clientWidth-50 ),

Y: fgm. randomRange (50, document.doc umentElement. clientHeight-150)

})

That. auto ();

}, Fgm. randomRange (900,110 0 ))

_ Create __: function (param)

{

Var that = this;

Var oEntity = null;

Var oChip = null;

Var aChip = [];

Var timer = null;

Var oFrag = document. createDocumentFragment ();

OEntity = document. createElement ("div ");

With (oEntity. style ){

Position = "absolute ";

Top = document.doc umentElement. clientHeight + "px ";

Left = param. x + "px ";

Width = "4px ";

Height = "30px ";

BorderRadius = "4px ";

Background = fgm. getRanColor ();

};

Document. body. appendChild (oEntity );

OEntity. timer = setInterval (function (){

OEntity. style. top = oEntity. offsetTop-20 + "px ";

If (oEntity. offsetTop <= param. y ){

ClearInterval (oEntity. timer );

Document. body. removeChild (oEntity );

(Function (){

// Randomly generates fragments between 50-

// Due to the low processing efficiency of IE browser, the random range is reduced to 20-30

// When the fireworks are automatically set, the random range is reduced to 20-30.

Var len = (/msie/I. test (navigator. userAgent) | that. type = 2 )? Fgm. randomRange (20, 30): fgm. randomRange (50,100)

For (I = 0; I <len; I ++ ){

OChip = document. createElement ("div ");

With (oChip. style ){

Position = "absolute ";

Top = param. y + "px ";

Left = param. x + "px ";

Width = "4px ";

Height = "4px ";

Overflow = "hidden ";

BorderRadius = "4px ";

Background = fgm. getRanColor ();

};

OChip. speedX = fgm. randomRange (-20, 20 );

OChip. speedY = fgm. randomRange (-20, 20 );

OFrag. appendChild (oChip );

AChip [I] = oChip

};

Document. body. appendChild (oFrag );

Timer = setInterval (function (){

For (I = 0; I <aChip. length; I ++ ){

Var obj = aChip [I];

With (obj. style ){

Top = obj. offsetTop + obj. speedY + "px ";

Left = obj. offsetLeft + obj. speedX + "px ";

};

Obj. speedY ++;

(Obj. offsetTop <0 | obj. offsetLeft <0 | obj. offsetTop> document.doc umentElement. clientHeight | obj. offsetLeft> document.doc umentElement. clientWidth) & (document. body. removeChild (obj), aChip. splice (I, 1 ))

};

! AChip [0] & clearInterval (timer );

}, 30)

})()

}

}, 30)

}

};

Fgm. on (window, "load", function (){

Var oTips = document. getElementById ("tips ");

Var aBtn = oTips. getElementsByTagName ("");

Var oFireWorks = new FireWorks ();

Fgm. on (oTips, "click", function (event ){

Var oEvent = event | window. event;

Var oTarget = oEvent.tar get | oEvent. srcElement;

Var I = 0;

If (oTarget. tagName. toUpperCase () = ""){

For (I = 0; I <aBtn. length; I ++) aBtn [I]. className = "";

Switch (oTarget. id ){

Case "manual ":

OFireWorks. type = 1;

Break;

Case "auto ":

OFireWorks. type = 2;

Break;

Case "stop ":

OFireWorks. type = 0;

Break;

}

OFireWorks. initialize ();

OTarget. className = "active ";

OEvent. stopPropagation? OEvent. stopPropagation (): oEvent. cancelBubble = true

}

});

Fgm. on (document, "contextmenu", function (event ){

Var oEvent = event | window. event;

OEvent. preventDefault? OEvent. preventDefault (): oEvent. returnValue = false

});

</Script>

</Head>

<Body>

<Div id = "tips"> <a id = "manual" href = "javascript :; "> manually set fireworks </a> <a id =" auto "href =" javascript :; "> automatic fireworks </a> <a id =" stop "href =" javascript:; "> stop fireworks </a> </div>

<P> due to the limited rendering capability of the browser, the range of randomly generated fireworks fragments is automatically adjusted to 20-30 when the browser is set to IE or automatically set to fireworks. </p>

<Div id = "copyright"> we recommend using Firefox and Chrome to preview the effect. By-Ferris, QQ: 21314130 </div>

</Body>

</Html>

I hope this article will help you design javascript programs.

Note <>: For more exciting tutorials, please pay attention to the help house programming

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JS fireworks based on object-oriented implementation

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

JS fireworks based on object-oriented implementation

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support