Heim > WeChat-Applet > Mini-Programmentwicklung > Beispielcode zum Implementieren des Countdown-Effekts in einem Miniprogramm

Beispielcode zum Implementieren des Countdown-Effekts in einem Miniprogramm

高洛峰
Freigeben: 2017-03-22 16:58:15
Original
1784 Leute haben es durchsucht

Verwenden Sie eine einfache Countdown-Funktion, um die direkte Beziehung zwischen der Seite und dem JS-Code in der Mini-Programmentwicklungsplattform zu testen.
Die zu implementierenden Funktionen sind wie folgt
1, der Countdown-Effekt von 60 auf 0
2, nach Abschluss des Countdowns wird eine Eingabeaufforderung angezeigt


Der Effekt ist wie folgt:

Beispielcode zum Implementieren des Countdown-Effekts in einem Miniprogramm

Beispielcode zum Implementieren des Countdown-Effekts in einem Miniprogramm

Tatsächlich ist der Implementierungscode sehr einfach

<!--index.wxml--> 
<view class="container">  
 <text>倒计时: {{second}} </text>  
</view>
Nach dem Login kopieren

Das Folgende ist das entsprechende js-Verarbeitung

//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);  
  }
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispielcode zum Implementieren des Countdown-Effekts in einem Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage