1. 程式人生 > >小程式自學系列(零基礎學小程式)---小程式實現簡單的倒計時效果

小程式自學系列(零基礎學小程式)---小程式實現簡單的倒計時效果

10天零基礎入門微信小程式開發,只講乾貨,實戰入門,10天開發屬於自己的上線小程式。

基本實現功能

1,從60到0的倒計時效果

2,倒計時完畢後會有提示

先看效果圖

其實實現程式碼很簡單

<!--index.wxml-->
<view class="container">
 <text>倒計時: {{second}} </text>
</view>

下面是相對應得js處理

//index.js
// 從從60到到0倒計時
function countdown(that) {
 var second = that.data.second
 if (second == 0) {
  that.setData({
   second: "60秒倒計時結束"
  });
  return ;
 }
 var time = setTimeout(function(){
  that.setData({
   second: second - 1
  });
  countdown(that);
 }
 ,1000)
}
 
Page({
  data: {
    second: 60
  },
  onLoad: function() {
    countdown(this);
  }
});

也可以關注我的個人微訊號,每天定期推送小程式最新開發技術,優秀原始碼,各種乾貨

關注上面微號回覆1可以加千人小程式學習微信群,群裡和大家交流學習,一起進步