Fireworks effect based on jQuery (sports-related) click the screen to display fireworks_jquery

");
var eLeft = event.pageX;
var etop = event.pageY;
var cHeight = document.documentElement.clientHeight;
//Set the color, size, and initialization position
$div. css({"width":4,"height":15,"background-color":"red","top":cHeight,"left":eLeft});
//Insert into the body of the page Go;
$("body").append($div);
//Don't have scroll bars
$("body").css("overflow","hidden");
//Move the DIV up, and after moving it to the mouse position, delete the DIV element, and then perform the fireworks effect;
$div.animate({"top":etop},700,function(){
//Remove DIV
$(this).remove();
/*Firework effect
*1. Fireworks are composed of many DIVs
*2. The color of each firework is different
*3. The positions of the fireworks are also different
*4. The directions of the fireworks are different
*5. The fireworks have a falling feeling
*/
//Create many DIVs using loops , to represent fireworks
for(i=0;i<20;i ){
$("body").append($(" "));
}
/*The color of the fireworks is random, and the color value is expressed in hexadecimal, so random numbers are combined with hexadecimal;
*The maximum value in hexadecimal ffffff , converted to decimal 16777215;
*Math.random()*16777215 formula can get a number between 0-16777215, because it is a decimal, so rounding is required;
*Math.ceil(Math.random ()*16777215) generates a random decimal value within the color value range;
*Math.random()*9 1 formula can get a number between 1-10, and so on
*. The toString(16) method converts the obtained decimal number into hexadecimal number, which is a random color value;
*/

var sjColor = ""
function changColor(){
sjColor = Math.ceil(Math.random()*16777215).toString(16)//;
//When the random color value generated is less than 6 digits, it needs to be filled in , and does not change its value, so add zero in front of this number;
while(sjColor.length<6){
sjColor = "0" sjColor;
}
}


//Set the color and position of the fireworks DIV, scatter, and fall
$(".yh").css({"width":3,"height":3,"top": etop,"left":eLeft});
/*When the fireworks disperse, set left and top
*Math.random()*20-20. You need to subtract 20 here because the fireworks are from the left and right of the center point. Scattered,
* when the minimum random number is 0-10 = -10, when the maximum random number is 20-10=10; so it is between plus and minus 10
*/
$(".yh" ).each(function(index, element) {
var $this = $(this);
changColor()
var yhX = Math.random()*400-200;
var yhY = Math.random()*600-300;
$this.
css({"background-color":"#" sjColor,"width":3,"height":3}).
animate({"top":etop-yhY,"left":eLeft-yhX},500);//Spread out
for(i=0;i<30;i ){
//Judge Fireworks on the right or left when the mouse is clicked
if(yhX<0){
downPw($this," ");//Down right
}else{
downPw($this," -");//Falling left
}
}

//Falling effect, that is, changing the X and Y of the firework element at the same time, it will have a parabola feel, and then delete the firework after completing the animation Element
function downPw(odiv,f){
odiv.animate({"top":" =30","left":f "=4"},50,function(){
setTimeout (function(){odiv.remove()},2000);
})
}
});
});
})
})