用js写的一个简单的烟花效果。
需要用到自己封装的move运动函数,在别的随笔里有封装好的,直接调用就行。
效果图:
js代码:
<script type="text/javascript"> function Fire(){ // 创建一个夜空 this.night = document.createElement("div"); this.setStyle(this.night,{ width:"1000px", height:"500px", "background-color":"#000", border:"red solid 10px", position:"relative" }) // 将这个夜空放到body中显示 document.body.appendChild(this.night) // 给夜空绑定单击事件 this.night.onclick = e=>{ var e = e || window.event; var x = e.offsetX; var y = e.offsetY; this.createOneFire(x,y) } } // 创建一个小火花 Fire.prototype.createOneFire = function(x,y){ // 创建一个小火花 var div = document.createElement("div"); this.setStyle(div,{ width:"10px", height:"10px", backgroundColor:this.getColor(), position:"absolute", left:x + "px", bottom:0 }); // 将这个小火花放到夜空中 this.night.appendChild(div) // 让这个小火花开始运动 - 上升到指定的位置 move(div,{top:y},()=>{ // 将上来的这个小火花干掉 div.parentElement.removeChild(div); // 创建很多小火花 this.createMayFire(x,y) }) } Fire.prototype.createMayFire = function(x,y){ // 获取一个随机数 var num = this.getRandom(100,150); // 定义一个数组 // 通过循环创建多个小火花 for(let i=0;i<num;i++){ let div = document.createElement("div"); // 将创建好的div放在预置的数组中 div.setAttribute("aaa",i) this.setStyle(div,{ width:"10px", height:"10px", backgroundColor:this.getColor(), position:"absolute", left:x + "px", top:y + "px", borderRadius:"50%" }); this.night.appendChild(div) // 获取随机left var l = this.getRandom(0,this.night.clientWidth-10); // 获取随机top var t = this.getRandom(0,this.night.clientHeight-10); move(div,{left:l,top:t},()=>{ // 删除很多个小火花 div.parentElement.removeChild(div) }) } } // 获取随机颜色的方法 Fire.prototype.getColor = function(){ return `rgb(${this.getRandom(0,256)},${this.getRandom(0,256)},${this.getRandom(0,256)})` } // 获取随机数的方法 Fire.prototype.getRandom = function(a,b){ return Math.floor(Math.random()*(a-b))+b; } // 设置样式的方法 Fire.prototype.setStyle = function(ele,styleObj){ for(var attr in styleObj){ ele["style"][attr] = styleObj[attr]; } } var f = new Fire() </script>