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

发布于 2021-6-2 10:36
浏览
4收藏

一、效果展示

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

鸿蒙应用开发时间卡片练习-开源基础软件社区

  

 

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

  鸿蒙应用开发时间卡片练习-开源基础软件社区

 

二、核心代码展示

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
卡片练习.zip 691.88K 53次下载
3
收藏 4
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐