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

一、效果展示

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

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

二、核心代码展示

主页(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）

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