微信小程序实现倒计时功能-小程序实现倒计时-小程序倒计时功能-即速应用

微信小程序实现倒计时功能-小程序实现倒计时-小程序倒计时功能

浏览量：2250 时间：2020-04-06 来源：爱上彗星的尾巴

1.
1，小程序仿电商网站秒杀倒计时
2.
2，显示格式为：例如1天11时11分11秒11
3.
3，秒杀时间结束后提示秒杀结束
4.
先看效果图
5.
其实实现挺简单
6.
!--index.wxml--viewclass"container"text秒杀:{{clock}}/texttext{{micro_second}}/text/view
7.
下面是js实现代码//indes.js/***需要一个目标日期，初始化时，先得出到当前时间还有剩余多少秒*1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒XX*2.提供一个时钟，每10ms运行一次，渲染时钟，再总ms数自减10*3.剩余的秒次为零时，return，给出tips提示说，已经截止*///定义一个总毫秒数，以一天为例//vartotal_micro_second3600*1000*24;//这是一天倒计时vartotal_micro_second10*1000;//这是10秒倒计时/*毫秒级秒杀倒计时*/functioncountdown(that){//渲染倒计时时钟that.setData({clock:dateformat(total_micro_second)//格式化时间});if(total_micro_second0){that.setData({clock:"秒杀结束"});//timeout则跳出递归return;}//settimeout实现倒计时效果setTimeout(function(){//放在最后--total_micro_second-10;countdown(that);},10)//注意毫秒的步长受限于系统的时间频率，于是我们精确到0.01s即10ms}//时间格式化输出，如1天天23时时12分分12秒秒12。每10ms都会调用一次functiondateformat(micro_second){//总秒数varsecondMath.floor(micro_second/1000);//天数vardayMath.floor(second/3600/24);//总小时varhrMath.floor(second/3600);//小时位varhr2hr%24;//分钟位varminMath.floor((second-hr*3600)/60);//秒位varsec(second-hr*3600-min*60);//equaltovarsecsecond%60;//毫秒位，保留2位varmicro_secMath.floor((micro_second%1000)/10);returnday+"天"+hr2+"时"+min+"分"+sec+"秒"+micro_sec;}Page({data:{clock:''},onLoad:function(){countdown(this);}});