Shulou(Shulou.com)06/01 Report--

The editor of this article introduces "how to achieve the countdown function of Mini Program" in detail. The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve the countdown function of Mini Program" can help you solve your doubts. Let's follow the editor's train of thought to learn new knowledge.

The countdown function is a common function, such as the user needs to use it to get the CAPTCHA. Here is a record of the simple implementation of the countdown function in WeChat Mini Programs

Just look at the code.

/ / 60 seconds countdown

Function countDown (that,count) {

If (count = = 0) {

That.setData ({

TimeCountDownTop: 'get the CAPTCHA'

Counting:false

})

Return

}

That.setData ({

Counting:true

TimeCountDownTop: count + 'get it again in seconds'

})

SetTimeout (function () {

Count--

CountDown (that, count)

}, 1000)

} 1234567891011121314151617181920

Called where the countdown is needed

Page ({

Data: {

Counting:false

}

/ / generate verification code

GenerateVerifyCode:function () {

Var that = this

If (! that.data.counting) {

Wx.showToast ({

Title: 'CAPTCHA sent'

})

/ / start the countdown to 60 seconds

CountDown (that, 60)

}

}

}) 123456789101112131415161718

The following is a brief introduction to the implementation of the function.

First of all, the countdown is written on the outside of Page, which is a mistake.

The key to implementing the countdown is the setTimeout method, which is the following code. The setTimeout method can be set to execute a function at a specified time interval. The format of the application is setTimeout (function (), time), function is the corresponding method to be executed, and time is the time interval, where 1000 represents 1000 milliseconds, that is, the countDown method is executed every 1 second.

SetTimeout (function () {

Count--

CountDown (that, count)

}, 1000); 1234

The countDown method uses the count field to set the countdown time, for example, 60 seconds here.

That is also passed in the countDown method to update the page using the setData method when the countdown state changes.

In the countDown method, the counting field is used to determine whether the countdown is already in order to avoid repeated countdown.

The countdown is judged by count and exited directly by return.

After reading this, the article "how to achieve the countdown function of Mini Program" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself. If you want to know more about the article, welcome to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.