要实现烟花效果之前，我们先得将body的背景设为黑色，这样烟花的效果才能更加明显，下面附上两种烟花效果的代码：
1、自由散落效果
<!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>
<style>
.box{
width: 10px;
height: 10px;
position: absolute;
}
html,body{
height: 100%;
overflow: hidden;
}
</style>
</head>
<body bgcolor="#000">
</body>
</html>
<script src="./animation.js"></script>
<script>
//思路
//给body加点击事件
document.onclick = function(e){
e = e || window.event
let mouseX = e.clientX
let mouseY = e.clientY
//在底部生成一个div 颜色随机的 x轴 鼠标点击的x轴 y轴为屏幕高度
let box = createdDiv()
box.style.top = window.innerHeight + "px" //窗口高度
box.style.left = mouseX + 'px'
document.body.appendChild(box)//添加给对应的body
//控制div从底部到达鼠标点击的y轴位置
animated(box,{"top":mouseY},function(){
//在这个回调里面 原本的div删除 生成更多的div（颜色随机） 位置为鼠标点击的位置 这些div做抛物线运动
box.remove()
//随机个数
let count = randomNumber(15,20)
for(let i=0;i<count;i++){
let div = createdDiv()
// 位置为鼠标点击的位置
div.style.top = mouseY + "px"
div.style.left = mouseX + 'px'
document.body.appendChild(div)//添加给对应的body
//定时器控制div的运动
//记录了四个象限
// let arr = [{x:randomNumber(-20,-1),y:randomNumber(1,20)},
// {x:randomNumber(1,20),y:randomNumber(1,20)},
// {x:randomNumber(-20,-1),y:randomNumber(-20,-1)},
// {x:randomNumber(1,20),y:randomNumber(-20,-1)}]
//随机得到一个象限
// let stepPoint = arr[randomNumber(0,3)]
// 得到一个随机数来控制x和y 正负
let x = randomNumber(0,1)==0?randomNumber(1,20):randomNumber(1,20)*-1
let y = randomNumber(0,1)==0?randomNumber(1,20):randomNumber(1,20)*-1
let stepPoint = {x,y}
let stepY = stepPoint.y //取出y值
let timer = setInterval(()=>{
//得到当前位置
let currentX = parseFloat(div.style.left)
let currentY= parseFloat(div.style.top)
stepY++
div.style.top = currentY + stepY + "px"
div.style.left = currentX + stepPoint.x + 'px'
//等div的x轴到达0或者x到达屏幕的宽度 或者 y轴到达0 或者y到达屏幕高度的时候
//停止运动 清除div
if(currentX<=0 || currentX>= window.innerWidth || currentY <= 0 || currentY >= window.innerHeight){
clearInterval(timer)
div.remove()
}
},10)
}
},40)
}
// 生成随机颜色
function randomColor(min,max){
let r = randomNumber(min,max)
let g = randomNumber(min,max)
let b = randomNumber(min,max)
return `rgb(${r},${g},${b})`
}
//生成区间内容随机数
function randomNumber(min,max){
return Math.round(Math.random()*(max-min))+min
}
//生成div给定对应的颜色和位置
function createdDiv(){
let div = document.createElement('div')
div.className = 'box'
div.style.backgroundColor = randomColor(100,250)
return div
}
</script>2、圆形效果
<!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>
<style>
.box{
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
}
</style>
</head>
<body bgcolor="#000">
</body>
<script src="./animatedPlus.js"></script>
<script>
//思路
//点击生成一个对应的div 定位放在底下
document.onclick = function(e){
e = e || window.event
//获取点击的位置
let mouseY = e.clientY
let mouseX = e.clientX
let box = createdDiv(mouseX,window.innerHeight - 20)//定位在底部
document.body.appendChild(box) //将创建的div添加到body中
//控制生成的div 升上去
animated(box,{"top":mouseY},function(){
//回调里面 这个div消失 生成多个div
box.remove() //将自己移除
//生成多个div
let count = randomNumber(12,18) //随机生成个数
//定义半径
let r = randomNumber(250,500) //随机生成半径
for(let i=1;i<=count;i++){ //遍历
let div = createdDiv(mouseX,mouseY)//重叠在一块 设置div的位置
document.body.appendChild(div) //添加到body中
//目标位置 Math.PI 为180deg
let targetX = Math.ceil(Math.cos(2*Math.PI/count*i)*r+ parseFloat(div.style.left))
let targetY = Math.ceil(Math.sin(2*Math.PI/count*i)*r+ parseFloat(div.style.top))
//让这个多个div的位置发生变化
animated(div,{"left":targetX,"top":targetY},function(){
div.remove() //移除元素
})
}
})
}
// 生成随机颜色
function randomColor(min,max){
let r = randomNumber(min,max)
let g = randomNumber(min,max)
let b = randomNumber(min,max)
return `rgb(${r},${g},${b})`
}
//生成区间内容随机数
function randomNumber(min,max){
return Math.round(Math.random()*(max-min))+min
}
//生成div给定对应的颜色和位置
function createdDiv(x,y){
let div = document.createElement('div')
div.className = 'box'
div.style.backgroundColor = randomColor(100,250)
div.style.left = x + 'px'
div.style.top = y + 'px'
return div
}
</script>
</html>
