element 订单列表中实现多个倒计时(vue+js)

实现场景：订单列表中多个倒计时（vue）

<template><div class=""><div v-for="(item,index) in list" :key="index">{{item.countDownTime }}</div></div>
</template>
<script>
export default {data() {return {list: [{endTime:"2020-11-02 15:06:36"},{endTime:"2020-11-12 16:06:36"},{endTime:"2020-11-08 04:06:36"},{endTime:"2020-11-17 19:06:36"}]}},created() {//这里应该写在请求接口拿到数据后，这里我使用模拟数据for (let i in this.list) {this.list[i].countDownTime = "";this.countDown(i);}},methods: {//倒计时countDownFun(time) {// console.log(time)let startTime = new Date(); //当前时间let end = new Date(time); //结束时间// console.log(end)let result = parseInt((end - startTime) / 1000); //计算出豪秒let d = parseInt(result / (24 * 60 * 60)); //用总共的秒数除以1天的秒数let h = parseInt((result / (60 * 60)) % 24); //精确小时，用去余let m = parseInt((result / 60) % 60); //剩余分钟就是用1小时等于60分钟进行趣余let s = parseInt(result % 60);//当倒计时结束时，改变内容if (result <= 0) {return "倒计时结束";}if (h < 10) {h = "0" + h;}if (s < 10) {s = "0" + s;}if (h == 0 && m == 0) {return "剩余" + s + "秒";} else if (h == 0) {return "剩余" + m + "分" + s + "秒";} else if(d == 0) {return "剩余" + h + "时" + m + "分" + s + "秒";} else {return "剩余" + d + "天" + h + "时" + m + "分" + s + "秒";}},// 定时器// 页面多个倒计时 归零时清除countDown(i) {let that = this;let item = that.list[i];that.list[i].countDownFn = setInterval(() => {//  console.log(that.countDownFun(item.endTime))if (that.countDownFun(item.countDownTime) == "倒计时结束") {clearInterval(that.list[i].countDownFn); //清除定时器} else {item.countDownTime = that.countDownFun(item.endTime);that.$set(that.list,item.countDownTime,that.countDownFun(item.endTime));}}, 1000);}}
};
</script>
<style scoped lang="less">
</style>

最终效果

找工作，没有面试题？来看这里，扫码查看1000+ 前端面试题

element 订单列表中实现多个倒计时(vue+js)相关推荐

订单列表多个倒计时(vue+js)
实现场景:订单列表中多个倒计时(vue) 代码部分 <template><div class=""><div v-for="(item,in ...
html中的父子通信代码,Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...
界外篇：返回前端订单列表中的订单详情为null，如何去除，如何为空
在写项目中,有时候我们返回给前端的数据为null,比如: 按照需求,有的需要这样写,但是有的就不需要, 一.那么如果为null,如何不显示这项呢? 办法如下: 第一种方法: 需要在实体类是哪个加一个注 ...
vue中使用原始html插值,VUE.JS中的插值表达式、v-cloak、v-text、v-html、v-bind:、v-on:...
插值表达式 {{ x }},类似这样子的就叫插值表达式 v-cloak 使用v-cloak 能够解决插值表达式闪烁的问题,但是要配合style中的display:none.CSS的属性选择器来使用 v ...
淘宝API接口：获取买家购买到的订单列表
今天分享的接口是获取买家购买到的订单列表,也客户获取店铺卖出去的订单列表. 获取形式有2种,一种是通过插件的形式,另外一种是通过授权登入. 淘宝/天猫获取购买到的商品订单列表 API 返回值说明获取 ...
对接抖店API-03 获取订单列表
官方文档 : 抖店开放平台 DOUDIAN_URL :https://openapi-fxg.jinritemai.com 如果前面获取accessToken 和签名都完成了, 那获取订单会简单很多, ...
vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
Vue.js列表渲染指令v-for
目录一.原理概述二.基本用法 (1)v-for循环普通数组 (2)v-for循环对象 (3)v-for循环对象数组 (4)v-for迭代整数一.原理概述 v-for指令时在模板编译的代码生成阶段 ...

element 订单列表中实现多个倒计时(vue+js)

找工作，没有面试题？来看这里，扫码查看1000+ 前端面试题

element 订单列表中实现多个倒计时(vue+js)相关推荐

最新文章

热门文章

element 订单列表中 实现多个倒计时(vue+js)

找工作，没有面试题？来看这里， 扫码查看1000+ 前端面试题

element 订单列表中 实现多个倒计时(vue+js)相关推荐

最新文章

热门文章

element 订单列表中实现多个倒计时(vue+js)

找工作，没有面试题？来看这里，扫码查看1000+ 前端面试题

element 订单列表中实现多个倒计时(vue+js)相关推荐