vue写倒计时一分钟,vue倒计时完毕后关闭定时器
这篇文章主要为大家详细介绍了某视频剪辑软件实现同时设置多个倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现同时设置多个倒计时的具体代码，供大家参考，具体内容如下
超文本标记语言如下：
div class=home
在需要分行下载处加上
tr v-for=(item，index)in便宜货:key= index
TD v-text= item。下载Djs _ time列表(项目。向下计数)/TD
/tr
/tbody
/div
射流研究…如下：
导出默认值{
data() {
返回{
特价商品：[],
总计：0,
第一页，
服务器时间：0,
计时器：""
//hostUrl:这个10.99 $ hostUrl
};
},
//用于数据初始化
已创建：函数(){
//获取数据
这个。商品()；
//获取服务器时间
这个。findservicetime()；
},
方法：{
商品：功能(){
var _ this=this
_这个. axios({
url:"商品/页面商品",
数据：{
电流：-1,
活动状态："",
极限：-1,
状态："出售"
},
成功：响应={
_这个。便宜货=回应。物品；
_这个. DJs _ time()；//调用定时器
//以下是我处理的后台返回数据开始时间和结束时间，页面显示用的
if (_this.bargainGoods.length！=0) {
for(var key in _ this。特价商品){
定义变量小时=0;
var开始时间=0；
if (_this.bargainGoods[key]！=null) {
廉价商品.倒计时="";
廉价商品.down=
//结束时间
廉价商品。加班；
开始时间=_ this。廉价商品[钥匙].活动开始时间
hour=hour.replace(/-/g，/)；
小时=新日期（小时)。getTime()；
开始时间=开始时间。替换(///g，/)；
开始时间=新日期(开始时间).getTime()；
//如果结束时间大于当前时间
如果(hour _ this。服务器时间开始时间_ this。服务器时间){
var hour time=hour-_ this。服务器时间；
if (hourtime 0) {
廉价商品.向下=结束倒计时：;
廉价商品.倒计时=
廉价商品.加班；
}
} else if(开始时间_ this。服务器时间){
var星时时间=开始时间-_ this。服务器时间；
if (starhourtime 0) {
廉价商品.向下=开始倒计时：;
廉价商品.倒计时=
廉价商品.活动开始时间
}
}否则{
廉价商品.向下=已结束；
廉价商品.倒计时="";
}
//控制台。log(_ this。便宜货)；
}
}
_这个。便宜货=_这个。便宜货；
}
}
});
},
//获取服务器时间
findServiceTime() {
var _ this=this
_这个. axios({
url:"服务器时间/获取日期时间",
成功：函数(资源){
_这个。服务器时间=RES . item
}
});
},
Djs_time: function() {
this.timer=setInterval(()={
这个。服务器时间=这个。服务器时间1000；
}, 1000);
},
DJs _ time list:函数(项目结束){
//此处项目结束的日期是年月日时分秒
var endItem=新日期(项目结束).getTime()；//获取列表传的截止时间，转成时间戳
var now item=this。服务器时间；//获取当前时间
var right time=end item-now item；//截止日期减去当前时间
if (rightTime 0) {
//如果剩余倒计时时间大于0，则执行倒计时；否则，它结束。
var DD=math . floor(right time/1000/60/60/24)；
var hh=math . floor((right time/1000/60/60)% 24)；
var mm=math . floor((right time/1000/60)% 60)；
var ss=math . floor((right time/1000)% 60)；
var time=DD days hh hours mm minutes ss seconds ；
}否则{
var show time=“”；
}
返回showTime
},
},
//离开页面后清除计时器
销毁(){
clear interval(this . timer)；
}
};
效果如下：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。