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

一、效果展示

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

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

二、核心代码展示

主页(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>周text><text>{{day}}text>
div>
<div style="position: absolute;top: 30%; left: 5%;">
      <text>{{year}}text><text>年text><text>{{month}}text><text>月text><text>{{ date }}text><text>日text>
div>
<div style="position: absolute; top: 50%; left: 40%;">
      <text>{{hour}}text><text>:text><text>{{minute}}text>
div>
div>

卡片（card）

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

附件：