烟花效果（面向对象写法）
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/utils.js"></script>
</head>
<body>
</body>
<script>
//1.创建一个空的构造函数
function FireWorks() {
//创建夜空作为对象属性
this.nightSky = document.createElement('div');
//将创建好的div放到body中
document.body.appendChild(this.nightSky)
//修饰样式
this.setStyle(this.nightSky, {
width: '800px',
height: '500px',
border: '5px solid #0f0',
'background-color': '#2c2c2c',
position: 'relative'
})
//点击夜空
this.clickSky()
}
//点击夜空方法
FireWorks.prototype.clickSky = function() {
//添加点击事件 - 事件源nightSky
this.nightSky.onclick = () => {
//记录鼠标在夜空点击的位置
var x = window.event.offsetX
var y = window.event.offsetY
//创建一个div
var div = document.createElement('div')
//将创建好的div放到夜空中
this.nightSky.appendChild(div)
//修饰div的样式
this.setStyle(div, {
width: '10px',
height: '10px',
position: 'absolute',
left: x + 'px',
bottom: 0,
//获取随机背景颜色
'background-color': this.getColor()
})
//小div上升到鼠标点击的位置
this.toSky(div, y, x)
}
}
//修饰样式方法
FireWorks.prototype.setStyle = function(ele, obj) {
var str = ''
for(var key in obj) {
str += key + ':' + obj[key] + ';'
}
ele.style.cssText = str
}
//获取随机颜色方法
FireWorks.prototype.getColor = function() {
return `rgb(${this.getRandom(256)},${this.getRandom(256)},${this.getRandom(256)})`
}
//获取随机数的方法
FireWorks.prototype.getRandom = function(a, b=0) {
return Math.floor(Math.random() * Math.abs(a -b)) + Math.min(a, b)
}
//小div上升到夜空的位置的方法
FireWorks.prototype.toSky = function(ele, y, x) {
//调用动画函数
animate(ele, {
top: y
}, () => {
//动画结束之后删除到达夜空中指定位置的div
this.nightSky.removeChild(ele)
//同时在第一个div到达的位置创建很多小的div
var num = this.getRandom(30, 50)
for(var i=0;i<num;i++) {
var div = document.createElement('div')
this.setStyle(div, {
width: '10px',
height: '10px',
position: 'absolute',
left: x + 'px',
top: y + 'px',
'background-color': this.getColor(),
'border-radius': '50%'
})
this.nightSky.appendChild(div)
//让每一个div炸开到随机位置
this.boom(div)
}
})
}
//让每个div炸开到随机位置方法
FireWorks.prototype.boom = function(div) {
//让每个小div都移动到随机位置
//获取随机位置
var l = this.getRandom(this.nightSky.clientWidth - div.offsetWidth)
var t = this.getRandom(this.nightSky.clientHeight - div.offsetHeight)
//动画运动
animate(div, {
left: l,
top: t
}, () => {
//动画结束后删除div(动画结束让div消失)
this.nightSky.removeChild(div)
})
}
//2.new调用
var f = new FireWorks()
</script>
</html>
效果：点击盒子出现效果
标签：function,FireWorks,夜空,烟花,面向对象,var,div,写法,nightSky 来源： https://www.cnblogs.com/bg618/p/16196324.html