订单列表多个倒计时(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>

最终效果

结束啦~代码可以直接复制到vue-cli看效果

前端菜鸟，不足之处请多指教~~

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

element 订单列表中实现多个倒计时(vue+js)
实现场景:订单列表中多个倒计时(vue) <template><div class=""><div v-for="(item,index) ...
Vue.js_实例_订单列表
下面做了一个商品订单列表的页面,对商品进行选择并进行价格合计的计算. 对新学习vue的同学可以作为小练习进行训练. 运行截图如下: 代码中使用了axios.js来实现对数据的异步操作. axios.j ...
Vue.js教程-目录
Vue.js教程-目录简介章节列表 Vue简介 Vue特点 Vue中数据观测的实现 Vue项目打包 Vue的组件化开发 Vue与后端的数据交互:axios 相关说明简介本目录作为Vue教程的首 ...
前端学习（2025）vue之电商管理系统电商系统之渲染订单列表数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（2024）vue之电商管理系统电商系统之根据分页获取订单列表数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
用vue.js重构订单计算页面
在很久很久以前做过一个很糟糕的订单结算页面,虽然里面各区域(收货地址)使用模块化加载,但是偶尔会遇到某个模块加载失败的问题导致订单提交的数据有误. 大致问题如下: 1. 每个模块都采用usercont ...
Vue电商项目—订单管理—订单列表模块-10
Vue电商项目-订单管理-订单列表模块-10 1.1 订单管理概述订单管理模块用于维护商品的订单信息, 可以查看订单的商品信息.物流信息, 并且可以根据实际的运营情况对订单做适当的调整. 1.2 订 ...
Vue模拟简单的订单列表结算页面
最近在学习Vue相关课程,最开始真的有点搞不懂,学习起来很吃力(虽然现在也是),d但通过今天做的小练习,真心觉得vue太友好了,js要十几行代码才能搞定的事,vue几行代码就可以了,不多说,直接把我练 ...
vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

订单列表多个倒计时(vue+js)

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

代码部分

最终效果

结束啦~代码可以直接复制到vue-cli看效果

前端菜鸟，不足之处请多指教~~

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

最新文章

热门文章