微信小程序> 小程序实现倒计时计时器最后十秒只显示一位数并且加入放大动画效果-ppt倒计时小程序-小程序倒计时功能

小程序实现倒计时计时器最后十秒只显示一位数并且加入放大动画效果-ppt倒计时小程序-小程序倒计时功能

浏览量:1863 时间: 来源:Archimelan
1.

效果:

2.

js:

varthat//用来实现最后十秒强调的动画varanimationwx.createAnimation({duration:300,timingFunction:'ease',})/***[倒计时函数,最后十秒只显示一个数字,且有放大动画效果]*@param{Number}minutes[分钟]*@param{Number}second[秒]*@param{function}TimeoutCallback[倒计时结束执行的函数]*/functioncountDown(minutes,second,TimeoutCallback){varinterval(){if(minutes0second0||second10){that.setData({time:minutes+':'+second--})}elseif(minutes0){minutes--;second59;that.setData({time:minutes+':'+second--})}elseif(second0){animation.scale(1.5,1.5).step()animation.scale(1,1).step()that.setData({time:second--,animationData:animation.export()})}else{clearInterval(timer)//倒计时结束回调if(typeofTimeoutCallback!'function'){return}TimeoutCallback()}}//因为定时器会延时一个间隔单位,所以先执行一次interval()vartimersetInterval(interval,1000)}Page({onLoad:function(){thatthiscountDown(1,5)}})3.

wxml:

viewstyle"display:inline-block;"animation"{{animationData}}"{{time}}/view

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎