Vue下设计倒计时部件
因为正在用Vue+node做一个IT教育课程考评系统,考试时有个倒计时考试时间的部件,写的时候遇到的几个问题分享一下。
1.setInterval写在这个部件的哪个生命过程?
一开始我认为是应该写在ready下,因为我怕created时,部件没有渲染好会出现问题,但是我测试发现created下也是可以的。
2.传过来的是分钟,转换成3个不同的时、分、秒
我用的是最简单暴力的方法,data中设置了3个属性endtime_h、endtime_m、endtime_s
3.字符串转int
parseInt(str)
4.三个数字算出来为个位数时前面+0
首先在3个属性前面加‘00’,然后取该字符串的后两位,这样就解决了,用.slice(-2)方法最快,网上还有其他取字符串后两位的方法,感觉还是这个最简单方便。
5.最后贴代码了
"created": function () {
let _this = this;
let alls = this.endtime * 60;
setInterval(() => {
alls--;
this.endtime_h = ('00' + parseInt(alls / 3600)).slice(-2);
this.endtime_m = ('00' + parseInt((alls - 3600 * this.endtime_h) / 60)).slice(-2);
this.endtime_s = ('00' + parseInt(alls - 3600 * this.endtime_h - 60 * this.endtime_m)).slice(-2);
}, 1000)
}
完毕,这都是我初学者的一些想法,欢迎大家一起讨论最优的解决方法,谢谢大家