<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #container{ width: 80%; height: 600px; border: 2px solid red; background: #000; margin:20px auto; cursor: pointer; position: relative; left: 0; top: 0; overflow: hidden; } .fire{ width: 10px; height:10px; position: absolute; bottom: 0; } .small-fire{ width: 10px; height:10px; position: absolute; border-radius: 50%; } </style> </head> <body> <div id="container"></div> </body> <script src="../move.js"></script> <script> function Fire(options){ this.x = options.x; this.y = options.y; this.cont = options.parent; // 1. Create body fireworks, styling, position the this .init () } Fire.prototype.init = function () { // body fireworks, styling, position the this .ele = document.createElement ( "div" ); the this .ele.className = "Fire" ; the this .ele.style.left = the this .x + "PX" ; the this .ele.style.background = randomcolor (); the this .cont.appendChild ( the this .ele) // 2. to start exercising end the this .animate () } Fire.prototype.animate =function () { // start moving. . . the Move ( the this .ele, { Top: the this .y }, function () { // delete the main fireworks the this .ele.remove () // 3. Create a small fireworks the this .createSmall () } .bind ( the this )) } Fire.prototype.createSmall = function () { // create a small fireworks, movement, deletion var NUM = random (10,20 ); // 1. random radius var R & lt = random (100,200 ); console.log(num) for(var i=0;i<num;i++){ let div = document.createElement("div"); div.className = "small-fire"; div.style.background = randomColor(); div.style.left = this.x + "px"; div.style.top = this.y + "px"; div.setAttribute("i",i); this.cont.appendChild(div); // 2.Trigonometric function, calculate the coordinates of points evenly distributed above a circle note trigonometric method of received radians: Do not forget degrees to radians// var l = parseInt(Math.cos( Math.PI/180 * (360/num * i)) * r) + this.x; var t = parseInt(Math.sin( Math.PI/180 * (360/num * i)) * r) + this.y; move(div,{ left:l, top:t },function(){ div.remove() }) } } // for(){ // ali[i] = i // ali[i].onclick = function(){ // this // } // } // 范围随机数 function random(max,min){ return Math.round(Math.random()*(max-min)+min); } // 随机颜色 function randomColor(){ return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")"; } var ocont = document.getElementById("container"); ocont.onclick = function(eve){ var e = eve || window.event; new Fire({ x:e.offsetX, y:e.offsetY, parent:this }); } </script> </html>