vue 新年倒计时+准点烟花特性

背景描述：

这里主要做了一个新年倒计时，能显示时间流逝的“钟表”，并且当时间截至时，会有烟花和祝福语，在工作的时候写的，用的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