Heim > WeChat-Applet > Mini-Programmentwicklung > Erkennen Sie die Wirkung des E-Commerce-Flash-Sale-Countdowns im Miniprogramm

Erkennen Sie die Wirkung des E-Commerce-Flash-Sale-Countdowns im Miniprogramm

高洛峰
Freigeben: 2017-02-27 14:17:52
Original
3093 Leute haben es durchsucht

In E-Commerce-Anwendungen werden häufig Flash-Sales verwendet, und die Flash-Sales verfügen über eine Countdown-Funktion. Hier verwenden wir die Countdown-Funktion, die wir Ihnen letztes Mal in E-Commerce-Anwendungen gezeigt haben.


Grundlegende Implementierungsfunktionen
1. Miniprogramm imitiert den Flash-Kill-Countdown für E-Commerce-Websites
2. Das Anzeigeformat ist: zum Beispiel 1 Tag 11 Stunden 11 Sekunden 11
3. Flash-Kill Nach Ablauf der Zeit wird angezeigt, dass der Flash-Sale beendet ist


Sehen Sie sich zuerst die Renderings an

Erkennen Sie die Wirkung des E-Commerce-Flash-Sale-Countdowns im Miniprogramm

Erkennen Sie die Wirkung des E-Commerce-Flash-Sale-Countdowns im Miniprogramm

Tatsächlich ist die Implementierung recht einfach

<span style="font-size:18px;"><!--index.wxml--> 
<view class="container">  
<text >秒杀: {{clock}}</text>  
<text>{{micro_second}}</text>  
</view></span>
Nach dem Login kopieren

Das Folgende ist der js-Implementierungscode

<span style="font-size:18px;">// indes.js  
/**   
 * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒  
 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX  
 * 2.提供一个时钟,每10ms运行一次,渲染时钟,再总ms数自减10  
 * 3.剩余的秒次为零时,return,给出tips提示说,已经截止  
 */ 
    
// 定义一个总毫秒数,以一天为例  
// var total_micro_second = 3600 * 1000*24;//这是一天倒计时  
var total_micro_second = 10 * 1000;//这是10秒倒计时  
    
/* 毫秒级秒杀倒计时 */ 
function countdown(that) {  
   // 渲染倒计时时钟  
   that.setData({  
     clock:dateformat(total_micro_second)//格式化时间  
   });  
    
   if (total_micro_second <= 0) {  
     that.setData({  
       clock:"秒杀结束" 
     });  
     // timeout则跳出递归  
     return ;  
   }
Nach dem Login kopieren


Weitere verwandte Artikel darüber, wie Sie den Effekt des E-Commerce-Flash-Sale-Countdowns in kleinen Programmen erzielen können, finden Sie auf der chinesischen PHP-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