微信小程序之15分钟倒计时附带天数和时钟的实现方法在文章中-微信小程序倒计时demo-小程序倒计时功能-即速应用

微信小程序之15分钟倒计时附带天数和时钟的实现方法在文章中-微信小程序倒计时demo-小程序倒计时功能

浏览量：2239 时间：2020-04-06 来源：丶枕边人

1.
这是制作的订单支付前倒计时，如果客户在规定时间内没能支付，则系统自动删除，这样就以便有些商品冗余，当然了，这里只有分钟和秒钟，天数和时钟我写在了最底下，最后代码的显示第七行，可以看一下，然后带入到相应的地方。
2.
这是实现的效果，每秒钟都在onload（）里面被调用，然后自动动态倒计时。
3.
其实难度不是很大，有一些代码防止你们看不懂，我会在下面注解出来的。
4.
首先还是wxml
viewclass'demo-text2'text倒计时：{{countdown}}/text/view5.
其次是wxss
.demo-text2{font-size:28rpx;color:#ff7ba8;}6.
我就加了一个颜色，哈哈哈哈~，你们可以根据自己的意思加字和东西，很好加的。
7.
最后就是最重要的js里，注释我会写在最下面的。
Page({/***页面的初始数据*/data:{},/***生命周期函数--监听页面加载*/onLoad:function(options){varthatthisthat.countDown();},//倒计时countDown(){varthatthisvarstarttime'2019/07/3009:04:19'varstartnewDate(starttime.replace(/-/g,"/")).getTime()varendTimestart+15*60000vardatenewDate();//现在时间varnowdate.getTime();//现在时间戳varallTimeendTime-nowvarm,s;if(allTime0){mMath.floor(allTime/1000/60%60);sMath.floor(allTime/1000%60);that.setData({countdown:m+"："+s,})setTimeout(that.countDown,1000);}else{console.log('已截止')that.setData({countdown:'00:00'})}},}）首先，是开始的时间，注意，千万不要是现在时间，不然一直是15分钟，无法改变的。如果你想要用获取的时间，把我上面的时间改成在onload（）里获取的时间就好了，this.data.你的时间属性。varstarttime'2019/07/3009:04:19'varstartnewDate(starttime.replace(/-/g,"/")).getTime()//时间转时间戳这里有个重点，replace(/-/g,"/")里面的/符号是根据starttime的日期时间的符号改变的，如果是“—”，就把里面/改成—就好了。varendTimestart+15*60000表示之前的时间加15分钟，如果想30分钟，改一下就好了，随你们用。第二点，如果获取到了时间就不用使用上面的时间转时间戳了。因为后面是用时间戳计算的，如果是用时间计算，比较麻烦，建议用时间戳。第三点，因为我这里只有分钟和秒钟，如果你需要时钟和天数的话，d代表day（天数），h代表（时钟）加入下面代码。vard,h,m,s;dMath.floor(allTime/1000/60/60/24);hMath.floor(allTime/1000/60/60%24);countdown:d+"："+h+"："+m+"："+s,countdown:'00:00:00:00'加在对应的位置一看就知道吧，哪里相同加哪里。setTimeout(that.countDown,1000);指定的毫秒数后调用函数，后面的数字是指定毫秒。注：如果需要小时显示几天的倒计时，请勿除于24，否则会显示为当天的24小时，此代码需要改为hMath.floor(allTime/1000/60/60);8.
好了，这就是倒计时的所有代码了，有问题的请留言。