背景描述：
这里主要做了一个新年倒计时，能显示时间流逝的“钟表”，并且当时间截至时，会有烟花和祝福语，在工作的时候写的，用的vue，专成HTML也方便，有时间就整理。
效果图如下：
倒计时：
准点烟花：
开发流程：
主要分为一个主文件和烟花的js文件。
index.vue的html主要有这些：
<template>
<div class="container">
<div v-if="!loading">
//时钟
<div class="loader"></div>
<div class="text">
距离2023年还有：
<p>{
{ day }}天 {
{ hour }}小时{
{ minute }}分{
{ second }}秒</p>
</div>
</div>
<div v-else-if="flag" style="width: 100%; height: 100%">
<div class="container" style="width: 100%; height: 100%">
<canvas id="canvas" style="width: 100%; height: 90%"> </canvas>
<div class="text-over">
新年快乐！
<p>祝2023的我们能兔飞猛进！大展宏兔！</p>
</div>
</div>
</div>
</div>
</template><style lang="scss" scoped>
.container {
background-color: #212121;
height: 90vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
margin: 0;
}
//时钟css
.loader {
position: relative;
transform: scale(2);
border-radius: 50%;
border: 4px solid;
width: 100px;
height: 100px;
color: white;
}
.loader::after {
position: absolute;
width: 0px;
height: 40px;
display: block;
border-left: 2px solid #fff;
content: "";
left: 45px;
border-radius: 1px;
top: 6.5px;
animation-duration: 12s;
}
.loader::before {
position: absolute;
width: 0px;
height: 30px;
display: block;
border-left: 3px solid #fff;
content: "";
left: 45px;
border-radius: 1px;
top: 17px;
animation-duration: 60s;
}
.loader::before,
.loader::after {
transform-origin: bottom;
animation-name: dial;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes dial {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.text {
margin-top: 90px;
color: #fff;
width: inherit;
text-align: center;
}
.text-over {
margin-top: 0px;
color: #fff;
font-size: 30px;
font-weight: bold;
letter-spacing: 2px;
width: inherit;
text-align: center;
// z-index: 3000 !important;
position: absolute; /*设为绝对定位*/
}
</style>
详细的js：
<script>
import firework from "./fireworks.js";
export default {
data() {
return {
day: "",
hour: "",
minute: "",
second: "",
loading: false,
time: "2",
flag: false,
};
},
mounted() {
this.time = setInterval(() => {
if (this.flag == true) {
this.getCanvas();
clearInterval(this.time);
}
this.getTime("1", "2023,01,22"); // 2023年春节
}, 1000);
},
beforeDestroy() {
clearInterval(this.time);
},
methods: {
getTime(obj, futimg) {
console.log("rrrrrrrr");
this.loading = true;
var nowtime = new Date().getTime(); // 现在时间转换为时间戳
var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳
var msec = futruetime - nowtime; // 毫秒 未来时间-现在时间
var time = msec / 1000; // 毫秒/1000
this.day = parseInt(time / 86400); // 天 24*60*60*1000
this.hour = parseInt(time / 3600) - 24 * this.day; // 小时 60*60 总小时数-过去的小时数=现在的小时数
this.minute = parseInt((time % 3600) / 60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
this.second = parseInt(time % 60); // 以60秒为一整份 取余 剩下秒数
if (msec < 0) {
this.flag = true;
this.getCanvas();
} else {
this.loading = false;
}
return true;
},
getCanvas() {
firework.onLoad();
},
},
};
</script>烟花的js:
var Firework = function () {
var canvas,
ctx,
w,
h,
particles = [],
probability = 0.04,
xPoint,
yPoint;
this.onLoad= function () {
window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("DOMContentLoaded", this.onLoad, false);
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
resizeCanvas();
window.requestAnimationFrame(updateWorld);
}
function resizeCanvas() {
if (!!canvas) {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
}
}
function updateWorld() {
update();
paint();
window.requestAnimationFrame(updateWorld);
}
function update() {
if (particles.length < 500 && Math.random() < probability) {
createFirework();
}
var alive = [];
for (var i = 0; i < particles.length; i++) {
if (particles[i].move()) {
alive.push(particles[i]);
}
}
particles = alive;
}
function paint() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "#212121";
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = "lighter";
for (var i = 0; i < particles.length; i++) {
particles[i].draw(ctx);
}
}
function createFirework() {
xPoint = Math.random() * (w - 200) + 100;
yPoint = Math.random() * (h - 200) + 100;
var nFire = Math.random() * 50 + 100;
var c =
"rgb(" +
~~(Math.random() * 200 + 55) +
"," +
~~(Math.random() * 200 + 55) +
"," +
~~(Math.random() * 200 + 55) +
")";
for (var i = 0; i < nFire; i++) {
var particle = new Particle();
particle.color = c;
var vy = Math.sqrt(25 - particle.vx * particle.vx);
if (Math.abs(particle.vy) > vy) {
particle.vy = particle.vy > 0 ? vy : -vy;
}
particles.push(particle);
}
}
function Particle() {
this.w = this.h = Math.random() * 4 + 1;
this.x = xPoint - this.w / 2;
this.y = yPoint - this.h / 2;
this.vx = (Math.random() - 0.5) * 10;
this.vy = (Math.random() - 0.5) * 10;
this.alpha = Math.random() * 0.5 + 0.5;
this.color;
}
Particle.prototype = {
gravity: 0.05,
move: function () {
this.x += this.vx;
this.vy += this.gravity;
this.y += this.vy;
this.alpha -= 0.01;
if (
this.x <= -this.w ||
this.x >= screen.width ||
this.y >= screen.height ||
this.alpha <= 0
) {
return false;
}
return true;
},
draw: function (c) {
c.save();
c.beginPath();
c.translate(this.x + this.w / 2, this.y + this.h / 2);
c.arc(0, 0, this.w, 0, Math.PI * 2);
c.fillStyle = this.color;
c.globalAlpha = this.alpha;
c.closePath();
c.fill();
c.restore();
},
};
}
var firework = new Firework()
export default firework总结/分析：
以上就是做的新年倒计时和准点烟花。
烟花参考这个博主:liu__software