小程式自學系列(零基礎學小程式)---小程式實現簡單的倒計時效果
阿新 • • 發佈:2018-12-27
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可以加千人小程式學習微信群,群裡和大家交流學習,一起進步