HarmonyOS 鸿蒙Next 两个不同日期之间的时间差计算

HarmonyOS 鸿蒙Next 两个不同日期之间的时间差计算

这段代码是一个用于计算距离高考还有多少天的前端组件。代码中定义了一个名为 </p> <pre>collegeEntranceExamination</pre> <p> 的结构体，并且使用了一些装饰器如 @Entry, @Component, 和 @State，这些在ArkTS框架中用来标记组件和状态管理。

以下是代码的一些关键点：

- 定义了几个状态变量 (text, text3, text4, daysToCollegeEntranceExamination) 来保存文本和计算结果。

- 定义了两个日期对象 selectedGaokaoDate 和 selectedShedingDate 分别表示选定的高考日期和当前设定日期。

- X1 方法计算从当前设定日期到高考日期之间的天数差异，并更新 daysToCollegeEntranceExamination 状态。

- build 方法构建了用户界面，包括两个日期选择器，一个用于选择当前日期，另一个用于选择高考日期，还有一个显示剩余天数的文本。

- 使用了 Column, Row, Text, Divider, 和 DatePicker 等UI组件来布局界面。

一下是完整示例代码：

@Entry
@Component
export default struct  collegeEntranceExamination{
  @State
  text: string = ''
  @State
  text3: string = ''


  @State daysToCollegeEntranceExamination: number = 0 //距离高考时间
  private selectedGaokaoDate: Date = new Date() // 选定的高考日期
  private selectedShedingDate: Date = new Date() // 选定的当前日期


  private X1(): number {
    let data1 = new Date(this.selectedShedingDate); // 将选中的第一个日期字符串转换为Date对象
    let data2 = new Date(this.selectedGaokaoDate); // 将选中的第二个日期字符串转换为Date对象
    let timeDiff1 = Math.abs(data1.getTime()); // 设定时间
    let timeDiff2 = Math.abs(data2.getTime()); // 高考时间
    let timeDiff3 = timeDiff2-timeDiff1
    this.daysToCollegeEntranceExamination = Math.ceil(timeDiff3 / (1000 * 3600 * 24)); // 转换为天数
    if (timeDiff1<timeDiff2) {
      return this.daysToCollegeEntranceExamination
    }
    return -1*this.daysToCollegeEntranceExamination
  }
  build(){
    Column() {
      Text(`距高考还有${this.daysToCollegeEntranceExamination}天`)
        .margin({ top: 12, bottom: 6 })
        .fontWeight(FontWeight.Bold)
        .fontSize(20)
      Divider()
        .width(150)

      Column({ space: 3 }) {
        Row() {
          Column() {
            Text('【选定日期】')
              .fontSize(30)
                //.backgroundColor('#82c67b')
              .width(200)
              .textAlign(TextAlign.Center)
              .margin({top:12,bottom:10})
              .borderRadius(5)
            DatePicker({
              // 创建日期选择器
              start: new Date('1900-1-1'), // 设置起始日期
              end: new Date('2100-1-1'), // 设置结束日期
              selected: this.selectedShedingDate // 设置选定的出生日期
            })
              .borderRadius(30)
              .backgroundColor('#ededed')
              .width('95%')
              .margin({ bottom: 6 })
              .height('400px')// 设置高度
              .disappearTextStyle({ color: Color.Gray, font: { size: '13fp', weight: FontWeight.Bold } })// 设置消失文本样式
              .textStyle({ color: Color.Black, font: { size: '13fp', weight: FontWeight.Normal } })// 设置文本样式
              .selectedTextStyle({
                color:'#ee8848',
                font: { size: '16fp', weight: FontWeight.Regular }
              })// 设置选定文本样式
              .onDateChange((value: Date) => { // 日期选择器变化时的处理
                this.selectedShedingDate = value; // 设置选定的日期
                this.X1()
              })
          }
        }

        Row() {
          Column() {
            Text('【高考日期】')
              .fontSize(30)
                //.backgroundColor('#82c67b')
              .width(200)
              .textAlign(TextAlign.Center)
              .margin({ top:10,bottom:10 })
              .borderRadius(5)
            DatePicker({
              // 创建日期选择器
              start: new Date('1900-1-1'), // 设置起始日期
              end: new Date('2100-1-1'), // 设置结束日期
              selected: this.selectedGaokaoDate // 设置选定的出生日期
            })
              .backgroundColor('#ededed')
              .borderRadius(30)
              .width('95%')
              .margin({ bottom: 6 })
              .height('400px')// 设置高度
              .disappearTextStyle({ color: Color.Gray, font: { size: '13fp', weight: FontWeight.Bold } })// 设置消失文本样式
              .textStyle({ color: Color.Black, font: { size: '13fp', weight: FontWeight.Normal } })// 设置文本样式
              .selectedTextStyle({
                color: '#ee8848',
                font: { size: '16fp', weight: FontWeight.Regular }
              })// 设置选定文本样式
              .onDateChange((value: Date) => { // 日期选择器变化时的处理
                this.selectedGaokaoDate = value; // 设置高考日期
                this.X1()
              })
          }
        }
      }

      Text(`${this.daysToCollegeEntranceExamination}天`)
        .margin({ top: 40})
        .fontSize(45)
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.White)
    .borderRadius(20)
  }
}