鸿蒙定时器的使用

第十一章

setTimeout：延迟执行

setTimeout基本语法

let timeId = setTimeout(()=>{
  console.log('我被执行了') //只执行一次
} , 1000//延迟执行的时间)

清除setTimeout的执行

clearTimeout(timeId//清除的是定时器的Id)

@Entry
@Component
struct Index {
  timeId?: number
  @State num: number = 5

  build() {
    Column() {
      Text(this.num + '')
      Row() {
        Button('倒计时开始')
          .onClick(() => {
            let timeId = setTimeout(() => {
              this.num--
              if (this.num === 0) {
                clearTimeout(this.timeId)
              }
            }, 1000)
            this.timeId = timeId

          })
        Button('终止倒计时')
          .onClick(() => {
            this.num = 5
            clearTimeout(this.timeId)
          })

      }
    }
    .height('100%')
    .width('100%')
  }
}

setInterval:间隔执行

setInterval基本语法

let timeId = setInterval(()=>{
  console.log('我被执行了') // 每隔1秒执行一次，没有进行条件终止就会一直执行。
} ,1000//间隔的时间单位毫秒) 

清除clearInterval的执行

clearInterval(timeId//清除的是定时器的Id)

@Entry
@Component
struct Index {
  timeId?: number
  @State num: number = 5

  build() {
    Column() {
      Text(this.num + '')
      Row() {
        Button('倒计时开始')
          .onClick(() => {
            let timeId = setInterval(() => {
              this.num--
              if (this.num === 0) {
                clearInterval(this.timeId)
              }
            }, 1000)
            this.timeId = timeId

          })
        Button('终止倒计时')
          .onClick(() => {
            this.num = 5
            clearInterval(this.timeId)
          })

      }
    }
    .height('100%')
    .width('100%')
  }
}

Date 对象

使用 Date 对象首先需要通过 new 操作符进行实例化
如：let date: Date = new Date()

实例方法

// let date1: Date = new Date()
// console.log(date1 + '')
// let date2: Date = new Date('1995-01-01T01:11:00')
// console.log(date2 + '')
// let date3: Date = new Date(1706170405708)
// console.log(date3 + '')
// console.log(Date.now() + '')


@Extend(Text)
function textStyle() {
  .width(100)
  .height(100)
  .backgroundColor('#191919')
  .borderRadius(10)
  .textAlign(TextAlign.Center)
  .fontColor(Color.White)
  .fontSize(70)
  .fontWeight(900)
}


@Entry
@Component
struct Page {
  getNow() {
    let data = new Date
    let y = data.getFullYear()
    let m = data.getMonth() + 1
    let d = data.getDate()
    return `${y}年 ${m} 月${d} 日 `
  }

  getWeek() {
    let data = new Date
    let w = data.getDay()
    let week = ''
    switch (w) {
      case 0:
        week = '星期日'
        break
      case 1:
        week = '星期一'
        break
      case 2:
        week = '星期二'
        break
      case 3:
        week = '星期三'
        break
      case 4:
        week = '星期四'
        break
      case 5:
        week = '星期五'
        break
      case 6:
        week = '星期六'
        break
      default:
    }
    return week
  }

  @State hour: number = 0
  @State minute: number = 0
  @State second: number = 0

  setTime() {
    let date = new Date()
    this.hour = date.getHours()
    this.minute = date.getMinutes()
    this.second = date.getSeconds()
  }

  build() {
    Column() {
      Column() {
        Text(this.getNow() + this.getWeek())
          .fontColor(Color.White)
          .fontSize(20)
        Stack() {
          Row({ space: 10 }) {
            Text(this.hour < 10 ? '0' + this.hour : this.hour.toString())
              .textStyle()
            Text(this.minute < 10 ? '0' + this.minute : this.minute.toString())
              .textStyle()
            Text(this.second < 10 ? '0' + this.second : this.second.toString())
              .textStyle()
          }

          .onAppear(() => {
            this.setTime()
            setInterval(() => {
              this.setTime()
            }, 1000)

          })

          Divider()
            .strokeWidth(2)
            .color(Color.Black)
        }
        .padding(10)

        Text('求知若渴，虚心若愚')
          .fontColor(Color.White)
          .fontSize(18)
      }

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Black)
    .justifyContent(FlexAlign.Center)
  }
}