overflow: hidden;
user-select: none;
}
audio {
opacity: 0;
}
.message {
position: fixed;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
width: 160px;
background-color: rgba(0, 0, 0, 0.52);
padding: 0px 17px;
top: 25px;
border-radius: 6px;
overflow: hidden;
z-index: 1000;
opacity: 0;
}
/* 消息提示框内容样式 */
.message p {
line-height: 1;
font-size:14px;
color: #ffffff;
}
.spark {
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
background-color: rgba(231, 200, 160, 0.8);
box-shadow: 0 0 40px 0 rgba(231, 200, 160, 0.8);
animation: glow 5s infinite;
}
.medium-spark {
width: 7px;
height: 7px;
}
.big-spark {
width: 10px;
height: 10px;
box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 4px #FFFFFF;
}
.meteor {
width: 6px;
height: 6px;
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 8px rgba(255, 255, 255, 0.6);
top: 0;
left: 80%;
opacity: 0.3;
transform: rotate(-45deg) translate(0, -50px);
animation: meteor 7s infinite;
}
.meteor:after {
content: ‘’;
width: 20vw;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 20px rgba(231, 200, 160, 0.4);
position: absolute;
top: 0;
left: 0;
}
@keyframes glow {
0% {
opacity: 0.9;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0.9;
}
}
@keyframes meteor {
0% {
transform: rotate(-45deg) translateX(0);
opacity: 0.3;
}
10% {
opacity: 1;
}
20% {
transform: rotate(-45deg) translateX(-100vw);
opacity: 0;
}
100% {
transform: rotate(-45deg) translateX(-100vw);
opacity: 0;
}
}
核心功能的实现
// 初始化内容
var wH = window.innerHeight;
var wW = window.innerWidth;
let backgroundRendering = document.getElementById(“backgroundRendering”);
var generateStars = function generateStars(f) {
for (var e = 0; e < f; e++) {
var single = document.createElement(“div”);
single.className = e % 20 == 0 ? “spark big-spark” : e % 9 == 0 ? “spark medium-spark” : “star”;
single.setAttribute(“style”, “top:” + Math.round(Math.random() * wH) + “px;left:” + Math.round(Math.random() * wW) + “px;animation-duration:” + (Math.round(Math.random() * 3000) + 3000) + “ms;animation-delay:” + Math.round(Math.random() * 3000) + “ms;”);
backgroundRendering.appendChild(single);
}
};
generateStars(getRandom(140,240));
// 全局变量 提供内容/对象存储
let fireworksCanvas = document.getElementById(“fireworks”);
let currentFireworks = document.createElement(“canvas”);
let currentObject = currentFireworks.getContext(“2d”);
let fireworksObject = fireworksCanvas.getContext(“2d”);
currentFireworks.width = fireworksCanvas.width = window.innerWidth;
currentFireworks.height = fireworksCanvas.height = window.innerHeight;
let fireworksExplosion = [];
let autoPlayFlag = false;
// 自动加载烟花动画
window.onload = function () {
drawFireworks();
lastTime = new Date();
animationEffect();
// 背景音乐
let audio = document.getElementById(‘bgm’);
document.querySelector(“body”).onclick = function () {
if (!autoPlayFlag) {
audio.play();
autoPlayFlag = true;
}
}
for (let i = 0; i <= 10; i++){
setTimeout(function () {
document.querySelector(“body > div.message”).style.opacity = i/10;
},i*60+2000)
};
for (let i = 0; i <= 10; i++){
setTimeout(function () {
document.querySelector(“body > div.message”).style.opacity = 1 - i/10;
},i*60+8000)
};
};
let lastTime;
// 烟花动画效果
function animationEffect() {
fireworksObject.save();
fireworksObject.fillStyle = “rgba(0,5,25,0.1)”;
fireworksObject.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
fireworksObject.restore();
let newTime = new Date();
if (newTime - lastTime > getRandom(10,1600) + (window.innerHeight - 767) / 2) {
let random = Math.random() * 100 > 15;
let x = getRandom(0, (fireworksCanvas.width));
let y = getRandom(0,400);
if (random) {
let bigExplode = new explode(
getRandom(0, fireworksCanvas.width),
getRandom(1, 3),
“#FFF”,
{
x: x,
y: y,
}
);
fireworksExplosion.push(bigExplode);
} else {
let x = getRandom(fireworksCanvas.width/2-300, fireworksCanvas.width/2+300);
let y = getRandom(0, 350);
let bigExplode = new explode(
getRandom(0, fireworksCanvas.width),
getRandom(1, 3),
“#FFF”,
{
x: x,
y: y,
},
document.querySelectorAll(“.shape”)[
parseInt(getRandom(0, document.querySelectorAll(“.shape”).length))
]
);
fireworksExplosion.push(bigExplode);
}
lastTime = newTime;
}
sparks.foreach(function () {
this.paint();
});
fireworksExplosion.foreach(function () {
let that = this;
if (!this.dead) {
this._move();
this._drawLight();
} else {
this.explodes.foreach(function (index) {
if (!this.dead) {
this.moveTo();
} else {
if (index === that.explodes.length - 1) {
fireworksExplosion[fireworksExplosion.indexOf(that)] = null;
}
}
});
}
});
setTimeout(animationEffect, 16);
}
Array.prototype.foreach = function (callback) {
for (let i = 0; i < this.length; i++) {
if (this[i] !== null) {
callback.apply(this[i], [i]);
}
}
};
fireworksCanvas.onclick = function (evt) {
let x = evt.clientX;
let y = evt.clientY;
let explode = new explode(
getRandom(fireworksCanvas.width / 3, (fireworksCanvas.width * 2) / 3),
2,
“#FFF”,
{
x: x,
y: y,
}
);
fireworksExplosion.push(explode);
};
let explode = function (x, r, c, explodeArea, shape) {
this.explodes = [];
this.x = x;
this.y = fireworksCanvas.height + r;
this.r = r;
this.c = c;
this.shape = shape || false;
this.explodeArea = explodeArea;
this.dead = false;
this.ba = parseInt(getRandom(80, 200));
};
explode.prototype = {
_paint: function () {
fireworksObject.save();
fireworksObject.beginPath();
fireworksObject.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
fireworksObject.fillStyle = this.c;
fireworksObject.fill();
fireworksObject.restore();
},
_move: function () {
let dx = this.explodeArea.x - this.x,
dy = this.explodeArea.y - this.y;
this.x = this.x + dx * 0.01;
this.y = this.y + dy * 0.01;
if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
if (this.shape) {
this._shapeExplode();
} else {
this._explode();
}
this.dead = true;
} else {
this._paint();
}
},
_drawLight: function () {
fireworksObject.save();
fireworksObject.fillStyle = “rgba(255,228,150,0.3)”;
fireworksObject.beginPath();
fireworksObject.arc(this.x, this.y, this.r + 3 * Math.random() + 1, 0, 2 * Math.PI);
fireworksObject.fill();
fireworksObject.restore();
},
_explode: function () {
let embellishmentNum = getRandom(30, 200);
let style = getRandom(0, 10) >= 5 ? 1 : 2;
let color;
if (style === 1) {
color = {
a: parseInt(getRandom(128, 255)),
b: parseInt(getRandom(128, 255)),
c: parseInt(getRandom(128, 255)),
};
}
let fullRange = parseInt(getRandom(300, 400));
for (let i = 0; i < embellishmentNum; i++) {
if (style === 2) {
color = {
a: parseInt(getRandom(128, 255)),
b: parseInt(getRandom(128, 255)),
c: parseInt(getRandom(128, 255)),
};
}
let a = getRandom(-Math.PI, Math.PI);
let x = getRandom(0, fullRange) * Math.cos(a) + this.x;
let y = getRandom(0, fullRange) * Math.sin(a) + this.y;
let radius = getRandom(0, 2);
let embellishment = new newEmbellishment(this.x, this.y, radius, color, x, y);
this.explodes.push(embellishment);
}
},
_shapeExplode: function () {
let that = this;
putValue(currentFireworks, currentObject, this.shape, 5, function (dots) {
let dx = fireworksCanvas.width / 2 - that.x;
let dy = fireworksCanvas.height / 2 - that.y;
let color;
for (let i = 0; i < dots.length; i++) {
color = {
a: dots[i].a,
b: dots[i].b,
c: dots[i].c,
};
let x = dots[i].x;
let y = dots[i].y;
let radius = 1;
let embellishment = new newEmbellishment(that.x, that.y, radius, color, x - dx, y - dy);
that.explodes.push(embellishment);
}
});
},
};
function putValue(fireworks, context, ele, dr, callback) {
context.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
let img = new Image();
let dots;
if (ele.innerHTML.indexOf(“img”) >= 0) {
img.src = ele.getElementsByTagName(“img”)[0].src;
implode(img, function () {
context.drawImage(
img,
fireworksCanvas.width / 2 - img.width / 2,
fireworksCanvas.height / 2 - img.width / 2
);
let dots = gettingData(fireworks, context, dr);
callback(dots);
});
} else {
let text = ele.innerHTML;
context.save();
let fontSize = getRandom(3,11);
context.font = fontSize + “vw 宋体 bold”;
context.textAlign = “center”;
context.textBaseline = “middle”;
context.fillStyle =
“rgba(” +
parseInt(getRandom(128, 255)) +
最后
整理面试题,不是让大家去只刷面试题,而是熟悉目前实际面试中常见的考察方式和知识点,做到心中有数,也可以用来自查及完善知识体系。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端基础面试题》,《前端校招面试题精编解析大全》,《前端面试题宝典》,《前端面试题:常用算法》
dth / 2,
fireworksCanvas.height / 2 - img.width / 2
);
let dots = gettingData(fireworks, context, dr);
callback(dots);
});
} else {
let text = ele.innerHTML;
context.save();
let fontSize = getRandom(3,11);
context.font = fontSize + “vw 宋体 bold”;
context.textAlign = “center”;
context.textBaseline = “middle”;
context.fillStyle =
“rgba(” +
parseInt(getRandom(128, 255)) +
最后
整理面试题,不是让大家去只刷面试题,而是熟悉目前实际面试中常见的考察方式和知识点,做到心中有数,也可以用来自查及完善知识体系。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端基础面试题》,《前端校招面试题精编解析大全》,《前端面试题宝典》,《前端面试题:常用算法》
[外链图片转存中…(img-kEpKz7dd-1714730651857)]
[外链图片转存中…(img-B7p7ZT7s-1714730651858)]
[外链图片转存中…(img-NKOHAnjm-1714730651858)]