|
|
鴻蒙應(yīng)用開發(fā)-呼吸訓(xùn)練app練習(xí)（8-11）, ![]() 8.在訓(xùn)練頁面倒計(jì)時(shí)顯示再堅(jiān)持的秒數(shù)
顯示效果：
點(diǎn)擊“點(diǎn)我開始”進(jìn)入下一個(gè)頁面
秒數(shù)會(huì)自動(dòng)的減少
代碼如下：
jltfxunlian.js中 初始化值然后加一個(gè)定時(shí)器
9.再堅(jiān)持的秒數(shù)在倒計(jì)時(shí)結(jié)束時(shí)隱藏文本
10.在訓(xùn)練頁面根據(jù)呼吸節(jié)奏交替顯示呼氣和吸氣
顯示效果：
點(diǎn)擊“點(diǎn)我開始”進(jìn)入下一個(gè)頁面
“呼氣”和“吸氣”自動(dòng)輪換
倒計(jì)時(shí)結(jié)束會(huì)顯示已完成并隱藏顯示“再堅(jiān)持幾秒的文本”
代碼如下：
在jltfxunlian.hml中
在jltfxunlian.css中
在jltfxunlian.js中
定義定時(shí)器用來設(shè)置呼氣和吸氣的時(shí)間間隔
定時(shí)器所完成的動(dòng)作（this.run2）
11.每次呼氣和吸氣都實(shí)時(shí)顯示百分比進(jìn)度
顯示效果：
選擇模式后點(diǎn)擊“點(diǎn)我開始”進(jìn)入訓(xùn)練頁面
已完成時(shí)會(huì)顯示100%
（運(yùn)行到現(xiàn)在的所有代碼）代碼如下
Index.hml
<div class=“jltfcontainer1“>
<div class=“jltfcontainer2“ >
<picker-view class=“jltfpv1“ range=“{{picker1range}}“ selected=“0“ onchange=“jltfchangeAction1“/>
<text class=“jltftxt“ >
分
</text>
<image src=“/common/hm.png“ class=“jltfimg“/>
<picker-view class=“jltfpv2“ range=“{{picker2range}}“ selected=“0“ onchange=“jltfchangeAction2“/>
</div>
<input type=“button“ value=“點(diǎn)我開始“ class=“jltfbtn“ onclick=“jltfclickAction“/>
</div>
Index.js
import router
from \“@system.router\“
var picker1value =
null;
var picker2value =
null;
export default {
data: {
picker1range: [“1“, “2“, “3“],
picker2range: [“較慢“, “舒緩“, “較快“]
},
jltfchangeAction1（pv）{
console.log（“左邊的選中選“+pv.newValue）;
picker1value=pv.newValue;
},
jltfchangeAction2（pv）{
console.log（“右邊的選中選“+pv.newValue）;
picker2value=pv.newValue;
},
jltfclickAction（）{
router.replace（{
uri:\“pages/jltfxunlian/jltfxunlian\“,
params: {“data1“:picker1value,“data2“:picker2value}
}）;
},
onInit（）{
console.log（“主頁面的onInit（）被調(diào)用“）;
},
onReady（）{
console.log（“主頁面的onReady（）被調(diào)用“）;
},
onShow（）{
console.log（“主頁面的onShow（）被調(diào)用“）;
},
onDestroy（）{
console.log（“主頁面的onDestroy（）被調(diào)用“）;
}
}
Index.css
.jltfcontainer1 {
flex-direction: column;
justify-content: center;
align-items: center;
width: 454px;
height: 454px;
}
.jltfcontainer2 {
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 50px;
width: 454px;
height: 250px;
}
.jltfpv1 {
width: 30px;
height: 250px;
}
.jltftxt {
text-align: center;
width: 50px;
height: 36px;
}
.jltfpv2 {
width: 80px;
height: 250px;
}
.jltfimg {
width: 208px;
height: 208px;
margin-left: 15px;
margin-right: 15px;
}
.jltfbtn {
width: 200px;
height: 50px;
font-size: 38px;
background-color: #000000;
border-color: #000000;
}
Jltfxunlian.hml
<div class=“jltfcontainer“>
<text class=“jltftxt1“>
{{jltfhuxi}}（{{jltfpercent}}%）
</text>
<text class=“jltftxt2“ show=“{{jltfshow}}“>
再堅(jiān)持{{jltfseconds}}秒
</text>
<input type=“button“ value=“點(diǎn)擊重新開始“ class=“jltfbtn“ onclick=“jltfclickAction“/>
</div>
Jltfxunlian.js
import router
from \“@system.router\“
var picker1value =
null;/*保存來自主頁面的值*/
var picker2value =
null;
var picker2seconds =
null;/*保存轉(zhuǎn)換后的秒數(shù)*/
var picker1seconds =
null;
/*初始化值*/
var timer1 =
null;
var timer2 =
null;
var timer3 =
null;
/*計(jì)數(shù)器*/
var counter = 0;
export default {
data: {
jltfseconds:0,
jltfshow:
true,
jltfhuxi: “吸氣“,
jltfpercent: “0“
},
jltfclickAction（）{
clearInterval（timer1）;
timer1 =
null;
/*點(diǎn)擊重新開始跳轉(zhuǎn)主頁面時(shí)清除定時(shí)器并設(shè)置為null*/
clearInterval（timer2）;
timer2 =
null;
clearInterval（timer3）;
timer3 =
null;
router.replace（{
uri:\“pages/index/index\“
}）;
},
run1（）{
this.jltfseconds--;/*自減1*/
if （
this.jltfseconds == 0） {
clearInterval（timer1）;/*清除定時(shí)器*/
timer1 =
null;
this.jltfshow =
false;/*倒計(jì)時(shí)結(jié)束時(shí)隱藏文本*/
}
},
run2（）{
counter++;
if （counter == picker1seconds/picker2seconds） {
clearInterval（timer2）;
timer2 =
null;
this.jltfhuxi = “已完成“;
}
else{
if （
this.jltfhuxi == “吸氣“） {
this.jltfhuxi = “呼氣“;
}
else if （
this.jltfhuxi == “呼氣“） {
this.jltfhuxi = “吸氣“;
}
}
},
run3（）{
/*this.jltfpercent轉(zhuǎn)化為整數(shù)加1再轉(zhuǎn)化為字符串*/
this.jltfpercent = （ parseInt（
this.jltfpercent）+1）.toString（）;
if （parseInt（
this.jltfpercent） < 10） {
this.jltfpercent = “0“ +
this.jltfpercent;
}
if （parseInt（
this.jltfpercent） == 100） {
this.jltfpercent = “0“;
}
if （timer2 ==
null） {
clearInterval（timer3）;
timer3 =
null;
this.jltfpercent = “100“;
}
},
onInit（）{
console.log（“訓(xùn)練頁面的onInit（）被調(diào)用“）;
console.log（“接收到的左邊選擇器的值：“+
this.data1）;
console.log（“接收到的右邊選擇器的值：“+
this.data2）;
picker1value =
this.data1;
picker2value =
this.data2;
/*判斷選擇的是幾分鐘然后進(jìn)行賦值*/
if （picker1value == “1“） {
picker1seconds = 60;
}
else if（picker1value == “2“）{
picker1seconds = 120;
}
else if（picker1value == “3“）{
picker1seconds = 180;
}
if （picker2value == “較慢“） {
picker2seconds = 6;
}
else if（picker2value == “舒緩“）{
picker2seconds = 4;
}
else if（picker2value == “較快“）{
picker2seconds = 2;
}
this.jltfseconds = picker1seconds;
},
onReady（）{
console.log（“訓(xùn)練頁面的onReady（）被調(diào)用“）;
},
onShow（）{
console.log（“訓(xùn)練頁面的onShow（）被調(diào)用“）;
timer1=setInterval（
this.run1,1000）;/*定時(shí)器*/
timer2=setInterval（
this.run2,picker2seconds*1000）;
timer3=setInterval（
this.run3,picker2seconds/100*1000）;
},
onDestroy（）{
console.log（“訓(xùn)練頁面的onDestroy（）被調(diào)用“）;
}
}
Jltfxunlian.css
.jltfcontainer {
flex-direction: column;
width: 454px;
height: 454px;
justify-content: center;
align-items: center;
}
.jltftxt1 {
font-size: 38px;
text-align: center;
width: 454px;
height: 40px;
margin-bottom: 10px;
}
.jltftxt2 {
width: 400px;
height: 40px;
font-size: 30px;
text-align: center;
}
.jltfbtn{
width: 300px;
height: 50px;
font-size: 38px;
background-color: #000000;
border-color: #000000;
margin-top: 40px;
}
本部分內(nèi)容參考了張榮超老師部分公開的代碼。 |
|
電子產(chǎn)業(yè)一站式賦能平臺
窺視卡
置頂卡
變色卡
