数组列表倒计时

weixin_43971788

已于 2023-07-18 09:25:26 修改

阅读量91

点赞数

文章标签： javascript 前端开发语言

于 2023-07-18 09:24:53 首次发布

本文链接：https://blog.csdn.net/weixin_43971788/article/details/131779665

版权

该代码示例展示了如何在Vue.js应用中创建一个倒计时功能，遍历数组列表并更新每个条目的剩余时间。在`created`钩子中初始化数据，计算每个项目的截止日期与当前时间的差值，并在`beginTimer`方法中设置每秒更新的计时器。同时，使用`dateT`方法格式化显示时间。当页面重新进入时，会清除已存在的计时器，避免重复启动。

摘要由CSDN通过智能技术生成

数组列表倒计时

<div v-for="(item,index) in tableData" :key="index>
 {{ dateT(item.setIntervalTime)}}
</div>

export default {
  data() {
    return {
      tableData: [],
      ticker: null
    };
  },
  created() {
    orderList().then( res => {
        for (let i = 0, len = res.content.length; i < len; i++) {
          const item = res.content[i]
          item.setIntervalTime = new Date(item.deadline).getTime() - new Date().getTime()
        }
        this.tableData = res.content
        if (this.ticker) {
          //这一段是防止进入页面出去后再进来计时器重复启动
          clearInterval(this.ticker);
        }
        this.beginTimer()
      })
  },
  methods: {
		beginTimer() {
	      //这个计时器是每秒减去数组中指定字段的时间
	      this.ticker = setInterval(() => {
	        for (let i = 0, len = this.tableData.length; i < len; i++) {
	          const item = this.tableData[i];
	          if (item.setIntervalTime > 0) {
	            item.setIntervalTime = item.setIntervalTime - 1000;
	          }
	        }
	      }, 1000);
	    },
	    dateT(deadline) {
     		if (deadline >= 0) {
		      let d = Math.floor(deadline / 1000 / 60 / 60 / 24);
		      let h = Math.floor((deadline / 1000 / 60 / 60) % 24);
		      let m = Math.floor((deadline / 1000 / 60) % 60);
		      let s = Math.floor((deadline / 1000) % 60);
		      return (d < 10 ? ('0' + d) : d) + ":" + (h < 10 ? ('0' + h) : h) + ":" + (m < 10 ? ('0' + m) : m) + ":" + (s < 10 ? ('0' + s) : s);
		      }
		  },
	}
}