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

简介: 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+ 前端面试题

WX搜索 【MST题库】小程序查看

相关文章
|
4天前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
4天前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
24 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
5天前
|
存储 JavaScript 前端开发
Angular.js 如何绘制列表
Angular.js 如何绘制列表
12 2
|
5天前
|
JavaScript 前端开发 开发者
Vue路由及Node.js环境搭建
Vue.js 和 Node.js 是两个不同的技术,分别用于前端和后端开发,具有不同的用途和功能
5 1
|
6天前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
41 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
6天前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
|
6天前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
6天前
|
存储 JavaScript
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
|
6天前
|
JavaScript
Vue与原生JS中方法调用
Vue与原生JS中方法调用
8 0
|
6天前
|
资源调度 JavaScript 搜索推荐
服务端渲染:使用Nuxt.js构建Vue SSR应用
【4月更文挑战第22天】本文介绍了如何使用Nuxt.js创建Vue SSR应用。首先确保安装Node.js和npm/yarn,然后全局安装Create Nuxt App,创建项目并选择配置。Nuxt.js提供清晰的项目结构,如`pages/`存放Vue页面。编写简单SSR页面后,启动开发服务器预览。完成开发,使用Nuxt.js命令部署到静态文件托管服务,实现首屏加载优化和SEO提升。Nuxt.js简化了SSR开发,助力高效构建高性能Vue应用。