放烟花
<!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> body { background-color: #000; overflow: hidden; } .fire { position: absolute; border-top-right-radius: 10px; border-top-left-radius: 10px; width: 10px; height: 30px; } </style> </head> <body> <div class="fire"></div> </body> <script> document.onclick = function (event) { var e = event || window.event; // 设置一个空的数组用来存放小烟花 var arr = [] // 获取鼠标点击的位置 var x = e.clientX var y = e.clientY // 设置步长 var speed = 20 // 生成大烟花，设置他的css样式，出发点在可视区页面的下方 var fire = document.createElement("div") fire.className = "fire"; // randomColor随机生成颜色脚本 fire.style.background = randomColor() fire.style.left = x + "px"; fire.style.top = document.documentElement.clientHeight + "px" // 将大烟花追加到页面 document.body.appendChild(fire) // 生成定时器 var t = setInterval(function () { // 判断如果大烟花的top值小于目标值，清除定时器，并将大烟花清除 console.log(fire.offsetTop <= y) if (fire.offsetTop <= y) { clearInterval(t) document.body.removeChild(fire) // 执行show（生成小烟花） show() } // 让大烟花垂直向上运动 fire.style.top = fire.offsetTop - speed + "px" }, 20) // 循环、生成多个烟花、并添加样式 function show() { for (var i = 0; i < 50; i++) { var sFire = document.createElement("div") sFire.style.left = x + "px" sFire.style.top = y + "px" // 心形背景 // sFire.style.backgroundColor = randomColor() sFire.style.color = randomColor() sFire.innerHTML = "❤" sFire.style.position = "absolute"; // 设置移动动画 sFire.style.transform = " 0.01s linear" // 生成随机数 var a = Math.random() * 360; sFire.sx = Math.sin(a * 180 / Math.PI) * 20 * Math.random(); sFire.sy = Math.cos(a * 180 / Math.PI) * 20 * Math.random(); document.body.appendChild(sFire) arr.push(sFire) } }
// 计算累计点下的火花
let lostFire = 0
// 计时器 var s = setInterval(function move() { for (var i = 0; i < arr.length; i++) { arr[i].style.left = arr[i].offsetLeft + arr[i].sx + "px"; arr[i].style.top = arr[i].offsetTop + arr[i].sy + "px"; // 让烟花位置垂直方向上每次都增加，实现下落效果 arr[i].sy += 1 // 判断烟花是否运动出屏幕可视化区，如果是，就将它删除 if (arr[i].offsetLeft < 0 || arr[i].offsetLeft > document.documentElement.clientWidth || arr[i].offsetTop > document.documentElement.clientHeight) { document.body.removeChild(arr[i])
lostFire += 1
}
// 如果火花全部落下完则停止该定时器
if (lostFire >= arr.length) {
clearInterval(s)
}
} }, 20) } // 随机颜色 function randomColor() { return "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")"; } // 生成随机数 function random(min, max) { return Math.round(Math.random() * (max - min) + min) } </script> </html>
最后的效果
