国庆倒计时小Demo

725 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

吃饱饭才有力气写代码~

今天摸鱼的时候一心想为祖国母亲庆生,于是动手写了个国庆倒计时,现在分享给大家~

路由跳转

配置

这个地方卡了很久,因为在用cmd搭建vue项目时没有配置,以下是注意的点:

image.png

image.png

image.png 正确配置之后项目结构下就会有路由相关的代码

倒计时代码

吐槽

这个地方必须得吐槽一下ie浏览器,绝了!下面这个图是我在浏览器上调试时的log,这些代码在公司我都运行八百遍了,都是谷歌浏览器,就没有出现过这种情况!搜了一下还真有人遇到相似的问题,打断点发现错误出现在 const t = new Date("Oct 1, 2021 00:00:00");这一行,但是这在谷歌浏览器上就没事

dada0ad414238dacd46e8584fa400a8.png

核心代码

需要每秒刷新显示的时间,用到了created(){     setInterval(this.timeDown, 1000);   },这一句代码;

mounted(){
    this.timeDown();
  },
  created(){
    setInterval(this.timeDown1000);
  },
  methods: {
    timeDownfunction(){
      console.log("这是咋了")
      const t = new Date("Oct 1, 2021 00:00:00");
      const now = new Date();
      const des = t.getTime() - now.getTime();
      const days = Math.floor(des / (1000 * 60 * 60 * 24));
      const hours = Math.floor(
        (des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      const mins = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));
      const secs = Math.floor((des % (1000 * 60)) / 1000);
      this.day = days;
      this.hour = hours;
      this.minute = mins;
      this.seconds = secs;
    }
  },

下面是运行截图: 可以修改样式让它更美,这里只是个思路!

微信图片_20210929213236.jpg

加了个国旗的背景,气氛组得搞起来~ 微信图片_20210929213135.png

总结

摸鱼的时间好快乐,一心只想尽快为祖国母亲庆祝生日~

写完文章时间又更近了一点哟~

01ff4da15c917064118c7d684c3dfa7.png