小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
前言
吃饱饭才有力气写代码~
今天摸鱼的时候一心想为祖国母亲庆生,于是动手写了个国庆倒计时,现在分享给大家~
路由跳转
配置
这个地方卡了很久,因为在用cmd搭建vue项目时没有配置,以下是注意的点:
正确配置之后项目结构下就会有路由相关的代码
倒计时代码
吐槽
这个地方必须得吐槽一下ie浏览器,绝了!下面这个图是我在浏览器上调试时的log,这些代码在公司我都运行八百遍了,都是谷歌浏览器,就没有出现过这种情况!搜了一下还真有人遇到相似的问题,打断点发现错误出现在 const t = new Date("Oct 1, 2021 00:00:00");这一行,但是这在谷歌浏览器上就没事!
核心代码
需要每秒刷新显示的时间,用到了created(){ setInterval(this.timeDown, 1000); },这一句代码;
mounted(){
this.timeDown();
},
created(){
setInterval(this.timeDown, 1000);
},
methods: {
timeDown: function(){
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;
}
},
下面是运行截图: 可以修改样式让它更美,这里只是个思路!
加了个国旗的背景,气氛组得搞起来~