Moment.js 计算两个时间差（时分秒）

最新推荐文章于 2024-08-20 17:37:48 发布

斗萝大陆

最新推荐文章于 2024-08-20 17:37:48 发布

阅读量1.4w

点赞数

分类专栏： moment.js 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_57260058/article/details/117817684

版权

moment.js 时间差值 JavaScript 日期处理时间格式化

关键词由CSDN通过智能技术生成

moment.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用moment.js 计算两个时间的差值步骤：

第一步：使用npm导入moment的模块包

npm install moment --save

第二步：在main.js中配置moment.js的依赖

import moment from 'moment'; //导入模块
moment.locale('zh-cn'); //设置语言 或 moment.lang('zh-cn'); 
Vue.prototype.$moment = moment;//赋值使用

第三步：使用

this.$moment('2019/06/17 14:00:00').startOf('hour').fromNow(); //1小时前
this.$moment().format('YYYY年MM月DD日 HH时mm分ss秒');  //2019年08月01日 19时50分20秒
this.$moment(new Date()).format('YYYY年MM月DD日 HH时mm分ss秒');  //2019年08月01日 19时50分20秒

//计算两个日期的天数
let days = this.$moment('2019/06/17 14:00:00').diff(this.$moment('2019/06/20 14:00:00'), 'days'); 

//比较两个日期的大小
let flag = this.$moment('2019/06/17 14:00:00').isBefore('2019/06/17 14:00:00');

实例的使用：

<!-- 时间差值的计算 -->
<template>
  <div class="parent">
    <h1>标题</h1>
    <div v-for="item in arr" :key="item">{{item}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date1: ["15:12:43", "16:15:35", "18:35:56"], // 时间数组，时分秒
      date2: ["16:12:43", "18:19:34", "19:35:50"], // 时间数组，时分秒
      arr: [], // 时间差计算结果的存放数组
    };
  },
  methods: {
    times() {
      /*  let days = this.$moment(endTime,指定运算的时间("hh:mm:ss")).diff(  //
        this.$moment(startTime,指定运算的时间),
        "seconds" 指定运算的结果是秒
      ); */
      const { date1, date2, arr } = this;
      for (let i = 0; i < date1.length; i++) {
        //计算两个日期相差都少小时分钟秒
        let days = this.$moment(date2[i], "hh:mm:ss").diff(
          this.$moment(date1[i], "hh:mm:ss"),
          "seconds"
        );
        arr.push(this.showTime(Math.abs(days)));
      }
    },
    // 时间日期转换，将秒数转换成02:20:22形式
    showTime(val) {
      if (val < 60) {
        return val + "秒";
      } else {
        var min_total = Math.floor(val / 60); // 分钟
        var sec =
          Math.floor(val % 60) > 9
            ? Math.floor(val % 60)
            : "0" + Math.floor(val % 60); // 余秒
        if (min_total < 60) {
          return "00:" + min_total + ":" + sec;
        } else {
          var hour_total =
            Math.floor(min_total / 60) > 9
              ? Math.floor(min_total / 60)
              : "0" + Math.floor(min_total / 60); // 小时数
          var min =
            Math.floor(min_total % 60) > 9
              ? Math.floor(min_total % 60)
              : "0" + Math.floor(min_total % 60); // 余分钟
          return hour_total + ":" + min + ":" + sec;
        }
      }
    },
  },
  created() {
    this.times(); // 页面加载时调用
  },
};
</script>
<style scoped>
h1 {
  color: rgb(16, 123, 218);
}
</style>