自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

OpenHarmony短信倒計(jì)時(shí)

系統(tǒng) OpenHarmony
倒計(jì)時(shí)的效果在網(wǎng)站或其他平臺(tái)看到的很多了吧,今天就讓我們來(lái)看看在OpenHarmony中如何實(shí)現(xiàn)它吧!

??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??

??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

1、背景

倒計(jì)時(shí)的效果在網(wǎng)站或其他平臺(tái)看到的很多了吧,今天就讓我們來(lái)看看在OpenHarmony中如何實(shí)現(xiàn)它吧!

2、效果預(yù)覽

視頻效果演示:

https://www.bilibili.com/video/BV1184y1z7SU/。

開(kāi)發(fā)板:DAYU200

IDE:DevEco Studio 3.0 Release Build Version: 3.0.0.993。

API:9

3、思路:

1.獲取Input框輸入值,判斷手機(jī)號(hào)碼是否正確,不正確的話,彈窗提示。
2.設(shè)置按鈕倒計(jì)時(shí),設(shè)置默認(rèn)sec=60,點(diǎn)擊后開(kāi)始計(jì)數(shù),每秒減1。
3.封裝倒計(jì)時(shí)函數(shù),獲取數(shù)字,設(shè)置定時(shí)器,如果倒計(jì)時(shí)為0,就停止計(jì)時(shí)。

好的,接下來(lái)我們看一下代碼實(shí)現(xiàn)。

4、創(chuàng)建應(yīng)用

#打卡不停更#OpenHarmony短信倒計(jì)時(shí)-開(kāi)源基礎(chǔ)軟件社區(qū)

5、刪除原有代碼

刪除原有代碼,導(dǎo)入圖片資源,做好準(zhǔn)備工作。

#打卡不停更#OpenHarmony短信倒計(jì)時(shí)-開(kāi)源基礎(chǔ)軟件社區(qū)

#打卡不停更#OpenHarmony短信倒計(jì)時(shí)-開(kāi)源基礎(chǔ)軟件社區(qū)

6、編寫(xiě)代碼,實(shí)現(xiàn)功能

(1)布局拆分

首先我們來(lái)看一下布局,然后將布局分解成它的各個(gè)基礎(chǔ)元素:

  • 識(shí)別出它的行和列。
  • 這個(gè)布局是否包含網(wǎng)格布局?
  • 是否有重疊的元素?
  • 界面是否需要選項(xiàng)卡?
  • 留意需要對(duì)齊、內(nèi)間距、或者邊界的區(qū)域。

首先,識(shí)別出稍大的元素。在這個(gè)例子中,一個(gè)重疊圖像,兩個(gè)行區(qū)域,和一個(gè)文本區(qū)域。

#打卡不停更#OpenHarmony短信倒計(jì)時(shí)-開(kāi)源基礎(chǔ)軟件社區(qū)

2、實(shí)現(xiàn)堆疊布局

首先是背景圖片,我們采用堆疊布局,用Stack來(lái)展示背景并鋪滿(mǎn)整個(gè)頁(yè)面。

Stack({ alignContent: Alignment.Center }) {
Image($r('app.media.img'))
.width('100%')
.width('100%')
}

3、實(shí)現(xiàn)文本展示

第一行為一個(gè)文本展示,我們用Text來(lái)展示。

Text("短信驗(yàn)證碼倒計(jì)時(shí)")
.fontSize(36)

4、實(shí)現(xiàn)輸入框

TextInput({ placeholder: "請(qǐng)輸入手機(jī)號(hào)" }) // 無(wú)輸入時(shí)的提示文本(可選)。
.type(InputType.Normal) // 輸入框類(lèi)型
.placeholderColor($r("app.color.fgLevel1")) // 設(shè)置placeholder顏色
.placeholderFont({
size: 20,
weight: FontWeight.Normal,
style: FontStyle.Normal
}) // 設(shè)置placeholder文本樣式
.enterKeyType(EnterKeyType.Next) // 設(shè)置輸入法回車(chē)鍵類(lèi)型
.caretColor($r("app.color.info")) // 設(shè)置輸入框光標(biāo)顏色
.maxLength(20) // 設(shè)置文本的最大輸入字符數(shù)
.onChange((value: string) => {
console.log("輸入的數(shù)據(jù)是" + value) // 輸入發(fā)生變化時(shí),觸發(fā)回調(diào)
this.text = value;
})
.width(200)
.height(50).backgroundColor(Color.White)

5、實(shí)現(xiàn)短信驗(yàn)證碼按鈕

Button(this.flag ? `${this.sec}` + "s后重新獲取" : "短信驗(yàn)證嗎", { type: ButtonType.Normal })
.width(150)
.height(50)
.backgroundColor($r("app.color.morandi2_alpha"))
.fontSize(18)
.fontColor($r("app.color.controlFocusFg_alpha"))
.borderRadius(10)
.onClick(() => {
}
})
}

6、定時(shí)器的實(shí)現(xiàn)

private materOnClick() {
var T = setInterval(() => {
if (this.sec <= 0) {
clearTimeout(T)
} else {
this.sec--
}
}, 1000)
}

7、簽名及真機(jī)調(diào)試

將搭載OpenHarmony標(biāo)準(zhǔn)系統(tǒng)的開(kāi)發(fā)板與電腦連接。

點(diǎn)擊File> Project Structure… > Project>SigningConfigs界面勾選“Automatically generate signing”,等待自動(dòng)簽名完成即可,點(diǎn)擊“OK”。如下圖所示:

#打卡不停更#OpenHarmony短信倒計(jì)時(shí)-開(kāi)源基礎(chǔ)軟件社區(qū)

在編輯窗口右上角的工具欄,點(diǎn)擊

#打卡不停更#OpenHarmony短信倒計(jì)時(shí)-開(kāi)源基礎(chǔ)軟件社區(qū)

按鈕運(yùn)行。效果如下所示:

#打卡不停更#OpenHarmony短信倒計(jì)時(shí)-開(kāi)源基礎(chǔ)軟件社區(qū)

??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??

??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??。

責(zé)任編輯:jianghua 來(lái)源: 51CTO開(kāi)源基礎(chǔ)軟件社區(qū)
相關(guān)推薦

2014-03-21 13:46:45

2014-08-18 14:30:27

Android倒計(jì)時(shí)

2011-04-11 09:17:28

Ubuntu倒計(jì)時(shí)

2017-07-20 16:21:52

UICountDownTidelay

2015-03-23 17:58:04

驗(yàn)證碼倒計(jì)時(shí)并行

2011-04-11 09:50:56

Ubuntu 11.0

2014-02-18 10:36:33

2022-06-14 08:45:27

瀏覽器IEWindows

2013-10-08 09:24:39

Windows 8.1Windows 8

2013-04-09 10:01:18

微軟Windows XP

2013-10-10 09:23:15

Android 4.4Kitkat

2019-12-13 19:37:00

BashLinux命令

2020-10-28 17:54:49

成都信息安全

2012-03-28 09:37:07

Ubuntu 12.0倒計(jì)時(shí)

2012-12-28 13:50:00

2015-01-21 16:07:57

Android源碼驗(yàn)證碼倒計(jì)時(shí)

2025-04-11 08:42:37

JavaScript倒計(jì)時(shí)前端

2013-06-06 11:27:52

iRadioWWDC2013

2019-11-22 11:54:04

數(shù)字時(shí)代數(shù)字中國(guó)數(shù)字產(chǎn)業(yè)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)