HarmonyOS鸿蒙Next应用开发时间卡片练习

HarmonyOS鸿蒙Next应用开发时间卡片练习 一、效果展示

运行项目后显示具体时间和星期。

上滑应用启动卡片显示当前时间

二、核心代码展示

主页 (default) js 代码：

export default {
  data: {
    hour: new Date().getHours(),
    minute: new Date().getMinutes(),
    day: "",
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    date: new Date().getDate()
  },
  onInit() {
    switch (new Date().getDay()) {
      case 0:
        this.day = "日";
        break;
      case 1:
        this.day = "一";
        break;
      case 2:
        this.day = "二";
        break;
      case 3:
        this.day = "三";
        break;
      case 4:
        this.day = "四";
        break;
      case 5:
        this.day = "五";
        break;
      case 6:
        this.day = "六";
        break;
    }
  }
}

hml 代码

<div style="position: absolute;">
  <div style="position: absolute;top: 10%; left: 40%;">
    <text>周{{day}}</text>
  </div>
  <div style="position: absolute;top: 30%; left: 5%;">
    <text>{{year}}年{{month}}月{{ date }}日</text>
  </div>
  <div style="position: absolute; top: 50%; left: 40%;">
    <text>{{hour}}:{{minute}}</text>
  </div>
</div>

卡片（card） js 代码：

export default {
  data: {
    hour: new Date().getHours(),
    minute: new Date().getMinutes()
  }
}

hml 代码

<div style="display: flex; align-items: center;justify-content: center;">
  <div>
    <text>{{hour}}</text>
    <text>:</text>
    <text>{{minute}}</text>
  </div>
</div>

三、完整代码地址

https://gitee.com/jltfcloudcn/jump_to/tree/master/%E6%97%B6%E9%97%B4%E5%8D%A1%E7%89%87

附件：