小程序实现简单的倒计时秒杀效果-倒计时小程序免费制作-小程序倒计时功能-即速应用

小程序实现简单的倒计时秒杀效果-倒计时小程序免费制作-小程序倒计时功能

浏览量：2108 时间：2020-04-06 来源：编程微刊

1.
1：小程序实现电商秒杀倒计时效果+样式
2.
wxml:
viewclass"container"text淘抢购倒计时:{{second}}/text/view3.
wxss:
.container{background:#fe6906;color:#ffffff;}4.
js
//从从60到到0倒计时functioncountdown(that){varsecondthat.data.secondif(second0){that.setData({second:"秒杀结束"});return;}vartimesetTimeout(function(){that.setData({second:second-1});countdown(that);},1000)}Page({data:{second:60},onLoad:function(){countdown(this);}});5.
效果如下
6.
rnh03tG7ni.gif
7.
2：时分秒倒计时+样式拼团秒杀功能https://blog.csdn.net/qq_41473887/article/details/81287786
8.
wxml：
viewclass'container'text剩余时间：{{countdown}}/text/view9.
wxss:
.container{background:#fe6906;color:#ffffff;}10.
js：
Page({/*页面的初始数据*/data:{countdown:'',endDate2:'2018-11-1111:41:00'},/*生命周期函数--监听页面加*/onLoad:function(options){varthatthis;that.countTime()},countTime(){varthatthis;vardatenewDate();varnowdate.getTime();varendDatenewDate(that.data.endDate2);//设置截止时间varendendDate.getTime();varleftTimeend-now;//时间差vard,h,m,s,ms;if(leftTime0){dMath.floor(leftTime/1000/60/60/24);hMath.floor(leftTime/1000/60/60%24);mMath.floor(leftTime/1000/60%60);sMath.floor(leftTime/1000%60);msMath.floor(leftTime%1000);msms100?"0"+ms:msss10?"0"+s:smm10?"0"+m:mhh10?"0"+h:hthat.setData({countdown:d+"："+h+"："+m+"："+s+":"+ms,})//递归每秒调用countTime方法，显示动态时间效果setTimeout(that.countTime,100);}else{console.log('已截止')that.setData({countdown:'00:00:00'})}},})11.
效果如下：
12.
原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe190后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家加入群聊，一起探讨交流。