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

Beispielcode zum Implementieren des Countdown-Effekts in einem Miniprogramm

高洛峰
高洛峰Original
2017-03-22 16:58:151759Durchsuche

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>

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);  
  }

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!

Stellungnahme:
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