1. 使用场景

我们在平时计算时间时，选择开始时间结束时间后，会展示出 2.5 小时、2.5 天格式的数据，那么当我们想具体的实现几天几小时几分钟的时候该如何操作呢~ 

2. 视频展示

3. 操作步骤

3.1 步骤一：新建并配置表单

新建表单并添加两个日期组件，分别命名为「开始日期」及「结束日期」，再添加一个数值组件。

3.2 步骤二：配置公式计算时间间隔

首先我们计算两个日期组件选择日期间的间隔秒数，日期组件相减返回的差值为时间戳，也就是我们的毫秒数，因此需要将时间戳进行转换，用毫秒数/1000 得到秒数，并使用 FIXED 公式保留两位小数，此时我们应该先判断日期是否为空，不为空时计算秒数差值。

3.3 步骤三：进行时间的换算

3.3.1 数据拼接处理

由于配置天、小时、分需要将秒分别计算出整数并且拼接到一起，因此我们需要使用 JS 来实现，给秒添加动作事件，在计算出秒的值时触发。

3.3.2 数据处理-计算天数

我们使用秒数转换成天数时，可以使用秒 /60/60/24 来计算，但是计算出的值是带有小数点的；

比如 2.5 天，实际上就是 2 天 12 个小时，那么我们只需要取到 2 来作为天数；

这时我们可以使用 math.floor() 来获取到这个值；

然后再加上单位"d"

配置如图：

3.3.3 数据处理-计算小时数

我们使用秒数转换成小时数，可以使用秒 /60/60 来计算，这时我们计算出的数值是全部的小时数，而我们计算天数时，计算出的值是带有小数点的；

比如 2.5 天，实际上就是 2 天 12 个小时，那么我们就可以获取到小数点的部分，也就是取余，那么我们先用秒 /86400，得到的余数就是不足一天的秒数，这时我们再除以 3600，就可以获取到我们的小时数了；

同样的我们可以使用 math.floor() 来获取到小时的整数；

然后再加上单位"h"

配置如图：

3.3.4 数据处理-计算分钟数

我们使用秒数转换成分钟数时，可以使用秒 /60 来计算，这时我们计算出的数值是全部的分钟数；

同样的我们先对天数取余，获取到不足一天的秒数，然后对不足一天的秒数转换成小时取余，获取到不足一小时的秒数，这时我们再除以 60，就可以获取到我们的分钟数了；

同样的我们可以使用 math.floor() 来获取到分钟的整数；

然后再加上单位"m"

配置如图：

3.3.5 配置展示数据的格式

计算出对应的天、小时、分钟后，就可以配置展示数据的格式了，当天数等于 0 d 时，则只展示小时分钟，当天数等于 0 d 且小时等于 0 h 时，则只展示分钟，否则全部展示出来,

配置如图：

以下代码可以直接复制使用，但要注意组件唯一标识的替换！

export function onChange({ value }) {
  //  const hour = Math.floor(value / 60) + "h " ;
  const day = Math.floor(value / 86400) + "d ";
  const hour = Math.floor((value % 86400) / 3600) + "h ";
  const min = Math.floor(((value % 86400) % 3600) / 60) + "min";
  // const seconds = Math.floor(((value % 86400) % 3600) % 60);

  if (day == "0d ") {
    //判断当天数等于0d时
    if (hour == "0h ") {
      //在当天数等于0d时，继续判断当小时等于0h时
      this.$("textField_kpm8dvak").setValue(min)
      //则将分钟赋值给组件中
    } else {
      this.$("textField_kpm8dvak").setValue(`${hour}${min}`)
      //天数等于0d，小时不等于0h时，将小时分钟赋值给组件

    }
  } else {
    this.$("textField_kpm8dvak").setValue(`${day}${hour}${min}`)
    //当天数不等于0d时，将天数小时分钟拼接一起赋值给组件
  }


}

4. 实现效果