どのようにハーモニーOSでLiteのウェアラブルのストップウォッチを開発する

導入
この記事では、Huawei Liteウェアラブルデバイスのストップウォッチアプリケーションを開発する方法を説明している.
Huawei Liteのウェアラブルウォッチアプリケーション開発は、HTMLタグとスタイルのレイアウトのためのCSSのサポートとJSの言語をサポートしています.
要件
デジスタジオ
腕時計またはシミュレータ
ライトウェアラブルのための新しいプロジェクト
次の3つの手順でLiteのウェアラブルのための新しいプロジェクトを作成することができます.
ステップ- 1

ステップ2

ステップ3

実装
UIデザイン

私は、アプリケーションの2つの基本的なコンポーネントを使用します.私は期間と3画像を開始し、一時停止し、時間を終了するためのテキストを使用します.
インデックス.HML :<stack class="stack">
<image src='/common/Mirage.png' class="background"></image>
<div class="container" onswipe="touchMove">
<text class="title">
{{time}}
</text>
<div class="row">
<image src="{{src}}" class="stopWatchButtons" onclick="startOrPause"></image>
<image src="/common/stop-button.png" class="stopWatchButtons" onclick="reset"></image>
</div>
</div>
</stack>
インデックス.CSS
` import '.../コモンスタイル.CSSの
停止ボタン
幅:64 px;
高さ:64 px;
マージン:5 px;
」
コード部:
setInterval関数は、システムの繰り返しタイマーを一定間隔で繰り返し実行するよう設定します.残りの部分では、出発時間と経過時間を使って計算しました.私は時間、分、秒、ミリ秒にこの時間を変換し、テキストに転送します.
インポートユーティリティをインポートしますユーティリティ.JS ;
StartTime ;
を指定します.
timerintervalをさせてください;
startorpauseflag = falseをしてください;
デフォルトエクスポート
データ名
時間: 00 : 00 : 00 : 00
src :' common/play button .PNG
//
startorpauses () {
var =
StartTime =日付.now ()--経過時間
を返します.
あれ.src =' common/pauseボタン.png ';
startorpauseflag = true ;
timeerinterval = setinterval (関数printtime () { }
日付.now () - starttime ;
あれ.time = timetostring (経過時間)
);
その他
クリアインターバル(timerinterval);
あれ.src = ' common/playボタン.png ';
startorpauseflag = false ;
｝
//
reset ()関数
var =
クリアインターバル(timerinterval);
あれ.time ="00 : 00 : 00 : 00 "
デフォルト値
あれ.src = ' common/playボタン.png ';
startorpauseflag = false ;
//
Touchmove(E)//スワイプイベントを処理します.
場合は(E方向= =“右”)//スワイプを終了する権利.
{ }
Utils返り値
｝
//
｝
関数timetostring (時刻)
//ミリ秒から数時間
diffinhrs =時間/330
hh =数学をしましょう.フロア・ディレイ

// hours to minutes
let diffInMin = (diffInHrs - hh) * 60;
let mm = Math.floor(diffInMin);

// minutes to seconds
let diffInSec = (diffInMin - mm) * 60;
let ss = Math.floor(diffInSec);

// seconds to milliseconds
let diffInMs = (diffInSec - ss) * 100;
let ms = Math.floor(diffInMs);

let formattedHH = padL(hh,2,0)
let formattedMM = padL(mm,2,0)
let formattedSS = padL(ss,2,0)
let formattedMS = padL(ms,2,0)

return `${formattedHH}:${formattedMM}:${formattedSS}:${formattedMS}`;

｝
関数padl ( a , b , c ){//string/number , length = 2 , char = 0
return ( new array ( B≠2 )結合(C≠0)＋a.スライス(- b )
」
出力

結論
あなたがストップウォッチに関連するアプリケーションを作成する場合は、単にこの方法を使用することができます.本稿では,dev eco studioを用いた調和OS用アプリケーションの開発を行った.
参考文献
HarmonyOS Document
HUAWEI Developer Forum - HUAWEI Developer