js源码之烟花特效
Posted liuyuexue520
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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位的颜色,不过亲测有效(瞻仰大神);
以上是关于js源码之烟花特效的主要内容，如果未能解决你的问题，请参考以下文章