鴻蒙應用開發(fā)-呼吸訓練app練習（8-11）

小嵌

鴻蒙應用開發(fā)-呼吸訓練app練習（8-11）, 8.在訓練頁面倒計時顯示再堅持的秒數(shù)

顯示效果：



點擊“點我開始”進入下一個頁面



秒數(shù)會自動的減少



代碼如下：

jltfxunlian.js中  初始化值然后加一個定時器







9.再堅持的秒數(shù)在倒計時結束時隱藏文本



10.在訓練頁面根據(jù)呼吸節(jié)奏交替顯示呼氣和吸氣

顯示效果：







點擊“點我開始”進入下一個頁面



“呼氣”和“吸氣”自動輪換

倒計時結束會顯示已完成并隱藏顯示“再堅持幾秒的文本”

代碼如下：

在jltfxunlian.hml中



在jltfxunlian.css中







在jltfxunlian.js中

定義定時器用來設置呼氣和吸氣的時間間隔



定時器所完成的動作（this.run2）





11.每次呼氣和吸氣都實時顯示百分比進度

顯示效果：



選擇模式后點擊“點我開始”進入訓練頁面



已完成時會顯示100%





（運行到現(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=“點我開始“ 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（）被調用“）;

     },

     onReady（）{

         console.log（“主頁面的onReady（）被調用“）;

     },

     onShow（）{

         console.log（“主頁面的onShow（）被調用“）;

     },

     onDestroy（）{

         console.log（“主頁面的onDestroy（）被調用“）;

     }

}



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}}“>

           再堅持{{jltfseconds}}秒

     </text>

     <input type=“button“ value=“點擊重新開始“ class=“jltfbtn“ onclick=“jltfclickAction“/>

</div>



Jltfxunlian.js


import router
from \“@system.router\“




var picker1value =
null;/*保存來自主頁面的值*/


var picker2value =
null;




var picker2seconds =
null;/*保存轉換后的秒數(shù)*/


var picker1seconds =
null;

/*初始化值*/


var timer1 =
null;


var timer2 =
null;


var timer3 =
null;

/*計數(shù)器*/


var counter = 0;




export default {

     data: {

         jltfseconds:0,

         jltfshow:
true,

         jltfhuxi: “吸氣“,

         jltfpercent: “0“

     },

     jltfclickAction（）{

         clearInterval（timer1）;

         timer1 =
null;

         /*點擊重新開始跳轉主頁面時清除定時器并設置為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）;/*清除定時器*/

             timer1 =
null;

              
this.jltfshow =
false;/*倒計時結束時隱藏文本*/

         }

     },

     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轉化為整數(shù)加1再轉化為字符串*/

        
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（“訓練頁面的onInit（）被調用“）;



         console.log（“接收到的左邊選擇器的值：“+
this.data1）;

         console.log（“接收到的右邊選擇器的值：“+
this.data2）;



         picker1value =
this.data1;

         picker2value =
this.data2;

         /*判斷選擇的是幾分鐘然后進行賦值*/

         
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（“訓練頁面的onReady（）被調用“）;

     },

     onShow（）{

         console.log（“訓練頁面的onShow（）被調用“）;



         timer1=setInterval（
this.run1,1000）;/*定時器*/

         timer2=setInterval（
this.run2,picker2seconds*1000）;

         timer3=setInterval（
this.run3,picker2seconds/100*1000）;

     },

     onDestroy（）{

         console.log（“訓練頁面的onDestroy（）被調用“）;

     }

}



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;

}



本部分內容參考了張榮超老師部分公開的代碼。