HarmonyOS原子化服务-时间管理

鸿蒙时代

发布于 2022-4-29 09:24

浏览

0收藏

案例效果
HarmonyOS原子化服务-时间管理-鸿蒙开发者社区

一、创建项目
二、代码示例
hml代码部分

<div class="container">
    <div class="showTime">
        <text class="showText"><span>{{mouth}}月{{day}}日</span></text>
        <text class="showText"><span>{{week}}</span></text>
    </div>
    <div class="boxTitle">
        <text class="text" style="width: 30%;"><span>时间</span></text>
        <text class="text" style="width: 70%;border-left-width: 1px;"><span>内容</span></text>
    </div>
    <div class="hengStyle" for="{{ planList }}" onlongpress="deleteList({{$idx}})">
        <input class="inputTitle" type="button" value="{{ $item.time }}" onclick="clickTime({{$idx}})"></input>
        <input class="inputTxt" type="text" value="{{ $item.content }}" onchange="inputPlanValue"></input>
    </div>
    <dialog id="delDialog" style="height: 120px;margin-bottom: 40%;">
        <div style="flex-direction: column; align-items: center;justify-content: center;">
            <text class="dialogText">
                <span>是否删除该条计划</span>
            </text>
            <div class="inner-btn">
                <input style="background-color: dodgerblue;" type="button" value="取消" onclick="setBack" class="btn-txt"></input>
                <input style="background-color: dodgerblue;" type="button" value="确认" onclick="setTure" class="btn-txt"></input>
            </div>
        </div>
    </dialog>
    <div class="btnStyle">
        <input id="school" class="inputBtn" type="button" value="＋" onclick="addPlan"></input>
    </div>
    <picker id="chooseTime" type="date" value="" selected="{{ selectVal }}" columns="3" onchange="chooseDate" oncancel="">
    </picker>
</div>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

css代码部分

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    width: 100%;
    height: 40px;
    font-size: 24px;
    color: #fff;
    text-align: left;
    padding-left: 12px;
    background-color: dodgerblue;
    margin-bottom: 10px;
}
.txt{
    width: 100%;
    text-align: left;
    font-size: 16px;
    color: dodgerblue;
    padding-left: 16px;
}
.showTime{
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}
.showText{
    font-size: 16px;
    color: #333;
    padding-right: 12px;
}
.boxTitle{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    width: 100%;
    margin-top: 4px;
    border: 1px;
}
.text{
    font-size: 16px;
    text-align: center;
    height: 40px;
/*    border: 1px;*/
}
.boxContent{
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.hengStyle{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
}
.inputTitle{
    width: 30%;
    height: 40px;
    font-size: 16px;
    color: #333;
    border-radius: 0px;
    background-color: #eee;
}
.inputTxt{
    width: 70%;
    font-size: 16px;
    height: 40px;
    border-radius: 0px;
    border-left-width: 1px;
    background-color: #eee;

}
.btnStyle{
    width: 100%;
    justify-content: center;
    align-items: center;
}
.inputBtn{
    width: 20%;
    height: 40px;
    text-align: center;
    font-size: 16px;
    border-radius: 0px;
    background-color: #ccc;
}
.dialogText{
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}
.inner-btn {
    width: 80%;
    height: 50px;
    align-items: center;
    justify-content: space-around;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.

js代码部分：

export default {
    data: {
//        year:"",
        mouth:"",
        day:"",
        week:"",
//        hour:"",
//        min:"",
        planList:[
            {
                id:0,
                time:"选择时间",
                content:"",
            }
        ],
        timeValue:"",
        inputValue:"",
        selectVal:"2021-06-08",
    },
    onShow(){
        this.getDate();
    },
    getDate:function(){
        let newDate = new Date();
        this.year = newDate.getFullYear();
        this.mouth = newDate.getMonth();
        this.day = newDate.getDay();
        this.hour = newDate.getHours();
        this.min = newDate.getMinutes();

        let weekArray = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
        this.week = weekArray[newDate.getDay()];
    },
    clickTime(idx){//弹出
        this.$element("chooseTime").show(idx);
        this.idx = idx;
    },
    chooseDate(e){//选择时间
        let idx = this.idx;
        this.timeValue = e.year + "-" + e.month + "-" + e.day;
        this.planList[idx].time = this.timeValue;
    },
    inputPlanValue(e){//监听输入
        let idx = this.idx;
        this.inputValue = e.value;
        this.planList[idx].content = this.inputValue;
    },
    addPlan(){//增加计划表
        this.planList.push({time:"选择时间",content:""});
    },
    deleteList(idx){//删除计划
        this.$element("delDialog").show();
        this.delIdx = idx
    },
    setBack(){
        this.$element("delDialog").close();
    },
    setTure(){
        let idx = this.delIdx
        this.planList.splice(idx,1);
        this.$element("delDialog").close();
        console.log(idx)
    },
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.