WeChat mini-program countdown function implementation code, mini-program countdown code

Source: Internet
Author: User

Code for the countdown function of the applet and the countdown code of the Applet

The countdown function is a common function. For example, you need to obtain the verification code. Here we will record the simple implementation of the Countdown function in the applet.

Let's look at the code.

// CountDown 60 seconds function countDown (that, count) {if (count = 0) {that. setData ({timeCountDownTop: 'Get Verification Code ', counting: false}) return ;}that. setData ({counting: true, timeCountDownTop: count + 'second and then get',}) setTimeout (function () {count --; countDown (that, count );}, (1000 );}

Called at the place where countdown is needed

Page ({data: {counting: false}, // generate the verification code generateVerifyCode: function () {var that = this; if (! That. data. counting) {wx. showToast ({title: 'verification code sent ',}) // start countDown 60 seconds countDown (that, 60 );}},})

The following describes how to implement the function.

First, the countdown is written outside the Page.

The key to implementing the countdown lies in the setTimeout method, that is, the following code. The setTimeout method can be used to execute a function at a specified time interval. The application format is setTimeout (function (), time). function is the method to be executed, and time is the time interval. Here, 1000 represents 1000 milliseconds, that is, the countDown method is executed once every one second.

setTimeout(function(){ count--; countDown(that, count); }, 1000);
  • In the countDown method, the count field is used to set the countDown time, for example, 60 seconds.
  • In the countDown method, that is also passed in to use the setData method to update the page when the countDown status changes.
  • The countDown method uses the counting field to determine whether the countDown is in progress.

Count is used to determine the end Of the countdown and exit directly through return.

Summary

The above is the code for implementing the countdown function of the mini-program introduced by the mini-editor. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.