https://cgygd.github.io/vue2-countdown/
好吧 我觉得用在列表里 不是特别好用,存在bug。又在网上发现了新的:
效果:
<template> <div class="app-container"> <div class="content"> <div v-for="(item,index) in dataList"> <el-card class="box-card"> <p>{{item.id}}</p> <p>{{item.name}}</p> <p>{{item.date}}</p> <p>倒计时:{{item.dd}} 天 {{item.hh}}: {{item.mm}}: {{item.ss}}</p> </el-card> </div> </div> </div> </template> <script> import moment from 'moment' export default { data() { return { dataList: [{ id: 1, name: '111', date: '2022-04-19 00:07:13' }, { id: 2, name: '222', date: '2022-04-19 00:08:19' }, { id: 3, name: '333', date: '2022-04-19 00:03:25' }, { id: 4, name: '444', date: '2022-04-19 00:04:53' } ] } }, mounted() { this.getData() }, methods: { getData() { var myNewData = [] this.dataList.map(((item, index) => { myNewData.push(item) this.$set(item, "ss", this.getTimeList()) })) this.dataList = myNewData }, getTimeList() { var _this = this; setInterval(function() { for (var key in _this.dataList) { var start = new Date().getTime(); var end = Date.parse(moment(_this.dataList[key]["date"]).add(1, 'day')) var rightTime = end - start; if (rightTime > 0) { var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24); var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24); var mm = Math.floor((rightTime / 1000 / 60) % 60); var ss = Math.floor((rightTime / 1000) % 60); dd = dd > 9 ? dd : '0' + dd hh = hh > 9 ? hh : '0' + hh mm = mm > 9 ? mm : '0' + mm ss = ss > 9 ? ss : '0' + ss _this.dataList[key]["dd"] = dd; _this.dataList[key]["hh"] = hh; _this.dataList[key]["mm"] = mm; _this.dataList[key]["ss"] = ss; } else { _this.dataList[key]["dd"] = '00'; _this.dataList[key]["hh"] = '00'; _this.dataList[key]["mm"] = '00'; _this.dataList[key]["ss"] = '00'; } } }, 1000); }, } } </script>
本文来自博客园,作者:哈利波特甜,转载请注明原文链接:https://www.cnblogs.com/zmh-980509/p/16070509.html