小程序页面时间的渲染

最近遇到一个时间的处理，就是接口返回的营业时间是距离0点的分钟数，就需要我们在前端做一些数据的处理

返回的时间类型

"workEndTime":1080,   //也就代表结束营业的时间是18：00
"workStartTime":480,  //也就代表开始营业的时间是8：00

前端的渲染效果
（哈哈，有点丑，不要在意）

image.png

直接附代码

• WXML

 <view style='display: flex;flex-direction: row;'>
  <text hidden='{{startHourZero}}'>0</text>
  <text>{{workStartHour|int}}:</text>
  <text hidden='{{startMinuteZero}}'>0</text>
  <text> {{workStartMinute}}-</text>
  <text hidden='{{endHourZero}}'>0</text>
  <text>{{workEndHour|int}}:</text>
  <text hidden='{{endMinuteZero}}'>0</text>
  <text>{{workEndMinute}}</text>
</view>

• JS

Page({

    /**
     * 页面的初始数据
     */
    data: {
      workStartHour: "", //开始的小时数
      workStartMinute: "", //营业开始时间的分钟数
      workEndHour: "", //营业结束的小时数
      workEndMinute: "", //营业结束的分钟数
      startHourZero: true, //是否显示开始的小时的0
      endHourZero: true, //是否显示结束的小时的0
      startMinuteZero: true, //是否显示开始的分钟的0
      endMinuteZero: true //是否显示结束的分钟的0
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
     var that = this;

      var workStartTime = 480;
      var workEndTime = 1090;
      var startMinute = workStartTime % 60;
      console.log('开始分钟数' + startMinute);

      //开始时间的处理
      var startMinute = workStartTime % 60;
      console.log('开始分钟数' + startMinute);
      var startHour = workStartTime / 60;
      console.log('开始小时数' + startHour);

      //结束时间的处理
      var endMinute = workEndTime % 60;
      console.log('结束分钟数' + endMinute);
      var endHour = workEndTime / 60
      console.log('结束小时数' + endHour);
    

    // 开始时间的判定
    //如果开始营业时间是整的小时数
    if (startMinute == 0) {
      console.log('整点开门')
      // 小时数  > 9
      if (startHour > 9) {
        that.setData({
          workStartHour: startHour,
          startHourZero: true,
          startMinuteZero: false,
          workStartMinute: 0,
        })
        //小时数 < 9
      } else {
        that.setData({
          workStartHour: startHour,
          startHourZero: false,
          startMinuteZero: false,
          workStartMinute: 0
        })
      }
      //如果分钟数介于0-10
    }

    if (startMinute < 10) {
      console.log('处于0-10')
      if (startHour > 9) {
        that.setData({
          workStartHour: startHour,
          workStartMinute: startMinute,
          startHourZero: true,
          startMinuteZero: false
        })
      } else {
        that.setData({
          workStartHour: startHour,
          workStartMinute: startMinute,
          startHourZero: false,
          startMinuteZero: false
        })
      }

    }
    if (startMinute > 9) {
      console.log('进入分钟数大于10的循环')
      if (startHour > 9) {
        that.setData({
          startHourZero: true,
          startMinuteZero: true,
          workStartHour: startHour,
          workStartMinute: startMinute
        })
      } else {
        that.setData({
          startHourZero: false,
          startMinuteZero: true,
          workStartHour: startHour,
          workStartMinute: startMinute
        })
      }
   }

    //结束时间的判定
    if (endMinute == 0) {
      console.log('整点开门')
      // 小时数  > 9
      if (endHour > 9) {
        that.setData({
          workEndHour: endHour,
          endHourZero: true,
          endMinuteZero: false,
          workEndMinute: 0,
        })
        //小时数 < 9
      } else {
        that.setData({
          workEndHour: endHour,
          endHourZero: false,
          endMinuteZero: false,
          workEndMinute: 0
        })
      }
      //如果分钟数介于0-10
    }


    if (endMinute < 10) {
      console.log('结束时间的分钟数处于0-10')
      if (endHour > 9) {
        that.setData({
          workEndHour: endHour,
          workEndMinute: endMinute,
          endHourZero: true,
          endMinuteZero: false
        })
      } else {
        that.setData({
          workEndHour: endHour,
          workEndMinute: endMinute,
          endHourZero: false,
          endMinuteZero: false
        })
      }

    }
    if (endMinute > 9) {
      console.log('结束时间进入分钟数大于10的循环')
      if (endHour > 9) {
        that.setData({
          endHourZero: true,
          endMinuteZero: true,
          workEndHour: endHour,
          workEndMinute: endMinute
        })
      } else {
        that.setData({
          endHourZero: false,
          endMinuteZero: true,
          workEndHour: endHour,
          workEndMinute: endMinute
        })
      }
    }
}
})

总结

写法有点傻，不过还是可以用的，哈哈，逻辑小白的神思路，希望能帮到大家啦