Home > WeChat Applet > Mini Program Development > Sample code to implement countdown effect in mini program

Sample code to implement countdown effect in mini program

高洛峰
Release: 2017-03-22 16:58:15
Original
1788 people have browsed it

Use a simple countdown function to test the direct relationship between the page and js code in the mini program development platform.
The functions to be implemented are as follows
1, the countdown effect from 60 to 0
2, there will be a prompt after the countdown is completed


The effect is as follows:

Sample code to implement countdown effect in mini program

Sample code to implement countdown effect in mini program

In fact, the implementation code is very simple

<!--index.wxml--> 
<view class="container">  
 <text>倒计时: {{second}} </text>  
</view>
Copy after login

The following is the corresponding js processing

//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);  
  }
Copy after login

The above is the detailed content of Sample code to implement countdown effect in mini program. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template