Background description:
Here is mainly a New Year's countdown, a "clock" that can display the passage of time, and when the time expires, there will be fireworks and blessings, written at work, using Vue, and it is convenient to write HTML, if you have time tidy.
The renderings are as follows:
Countdown:
Fireworks on time:
Development Process:
It is mainly divided into a main file and a js file of fireworks.
The html of index.vue mainly includes these:
<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>
Detailed 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>Fireworks 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 fireworkAnalyzed:
The above is the countdown to the New Year and the fireworks on time.
Fireworks refer to this blogger: liu__software