js源码之烟花特效

不多解释,直接上源码,纯手打,不借用任何插件

先来css代码

<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 700px; background-color: hsl(0, 0%, 0%);
    //给body添加一个overflow:hidden;可以让网页不显示滚动条 } .fire { position: absolute; width: 8px; height: 16px; /* width: 30px; height: 30px; */ border-radius: 100%; } .fires { width: 6px; height: 6px; position: absolute; border-radius: 3px; } </style>

html和js直接就放在一起了,因为html就是一个骨架,啥都没有,所有的元素都是通过js事件添加的

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>-烟火-</title></head><body> <script> //返回浏览器的宽度和高度 const w = window.screen.availWidth; const h = window.screen.availHeight; //动态添加元素 document.addEventListener("mousedown", function (e) { let div = document.createElement("div"); div.className = ‘fire‘; document.body.appendChild(div); let fire = document.getElementsByClassName("fire"); fire[0].style.backgroundColor = color(); //返回当前点击位置的相对坐标 let clickX = e.clientX; let clickY = e.clientY; //设置盒子的初始位置 fire[0].style.top = h + ‘px‘; fire[0].style.left = clickX + ‘px‘; // 调用定时器让盒子移动到当前的被点击的位置 const speed = 13; let loop = setInterval(move, 30); function move() { if (fire[0].offsetTop - speed >= clickY) { fire[0].style.top = fire[0].offsetTop - speed + ‘px‘; } else { clearInterval(loop); fire[0].style.top = clickY + ‘px‘; document.body.innerHTML = ‘‘; //在消失的瞬间调用函数,生成无数的盒子 stars(clickX, clickY); //给每个div不同的定位属性 } } }); // console.log(color2()) function stars(clickX, clickY) { let star_num = Math.ceil(Math.random() * 50 + 50); for (let i = 0; i <= star_num; i++) { let div = document.createElement("div"); //给当前添加的div设置相同的定位,让div都在同一个位置 div.style.backgroundColor = color(); div.style.top = clickY + ‘px‘; div.style.left = clickX + ‘px‘; //并且给已经生成的div指定类名,也就是样式 div.className = "fires"; // 每车次生成小div的时候,同时生成无数的随机数,让每个div自带不同的数值 let num1 = Math.random() * 20 - 10; let num2 = Math.random() * 20 - 10; // 这里设置不同的自定义属性是为了给不同的盒子,不同的初始速度,不然使用for循环添加动画的时候,所有的盒子都会以相同的速度移动,就没有了烟花的特效 div.setAttribute("speed_X", num1); div.setAttribute("speed_Y", num2); document.body.appendChild(div); } //创建完所有的小盒子之后,使用新的函数给每个div设定不同的初速度 // 让每个盒子以不同的初速度移动 speed(); } function speed() { // 设置定时器每次运动的时间差 const body = document.querySelector("body"); const runningtime = .3; const divs = document.querySelectorAll(".fires"); for (let i = 0; i < divs.length; i++) { const timer = setInterval(function () { divs[i].style.top = divs[i].offsetTop - divs[i].getAttribute("speed_y") + "px"; divs[i].style.left = divs[i].offsetLeft - divs[i].getAttribute("speed_X") + "px"; divs[i].setAttribute("speed_y", divs[i].getAttribute("speed_y") - runningtime); // 判断粒子的位置,如果粒子超出screen,就让粒子所对应的盒子从body中移除,不然动画停不下来,就容易造成卡顿 if (divs[i].offsetTop > h || divs[i].offsetLeft > w || divs[i].offsetLeft < 0) { clearInterval(timer) body.removeChild(divs[i]); } }, 30); } } //动态生成颜色 function color() { const num1 = Math.floor(Math.random() * 256); const num2 = Math.floor(Math.random() * 256); const num3 = Math.floor(Math.random() * 256); return "rgb(" + num1 + "," + num2 + "," + num3 + ")" }   function color2() { return "#" + function (color) { return new Array(7 - color.length).join("0") + color }((Math.random() * 0x1000000 << 0).toString(16)) } //颜色 移位运算符 function color3() { return "#" + (~~(Math.random() * (1 << 24))).toString(16) } </script></body></html>

附上截图

然后这是散开之后的截图了,技术有限,也就只能做成这样了,毕竟还是学者

结尾提供了几种大神提供的生成颜色的方式,然而我只会利用随机数生成255位的颜色,不过亲测有效(瞻仰大神);

相关文章