微信小程序实现订单倒计时

本例分享微信小程序实现订单倒计时的具体代码，供大家参考。具体内容如下

之前在做一个有群功能的项目时遇到了倒计时的问题。因为当时对技术不熟悉，在这方面耽误了很多时间，所以在这里整理了一下，希望能给以后的人提供一些启发。

1.实施思路

找到开始时间和结束时间之间的时间差，然后格式化时间差以获得我们想要的格式，例如：

Settimeout(这个。settimecount，1000)用于减少每秒的时间；这个函数，让这个函数每秒执行一次。

渲染：

2.实施困难

如果想实现单次倒计时，比如60s发送一个验证码，难度不是很大，但是要有多次倒计时就很难了。

不同的订单在不同的时间下，时差也不一样，所以我在这里卡了很久，然后我想通了一切才意识到原来是这样。

实现方法一：后台计算时间前端，直接获取时间差。当时我们采用这种方法是为了不影响工程进度。背景里的一些兄弟真的很难适应我这个菜鸟。

在我们得到这个时间差之后，我们可以对它进行处理，并将其放入数组循环中。这样做的好处是前端不需要将时间作为属性添加到原始数组中。

index.wxml

View class='item '单次倒计时： { { time } }/view class=' item '多次倒计时view class=' no '还没有记录/view class=' content ' blockwx : for=' { { listdata } } ' wx : key=' idx ' wx : for-item=' item ' wx : for-index=' { { idx } } ' view class=' tip { { item . time=0？is show ' : ' ' } } ' view class=' dis ' view class=' dis _ time left '剩余时间：{{item。倒计时} }/视图/视图/块/视图索引. wxss

第{ height :100 }页；背景# fff相对位置：}.项目{ height :4%；背景# fff文本对齐：中心；}.内容{ border:1px固态rgb(167，159，159)；background: # F6F8F8margin-bottom :300 rpx；border-bottom:无；}.无{ text-align : }中心；绝对位置：top:8z指数：-11；}.tip{ position:相对；背景# fff宽度：100%；height:100rpx保证金-底部： 5 rpx；padd :20 rpx 0；border-bottom: 1px实心gainsboro}.isShow { display:none}.dis { width :100%；font-size : 35 rpx；color: # 009FE5盒子尺寸：边框盒子；}.dis _ time { width :50%；}index.js

页面({ /** *页面的初始数据*/data : { ping data : [{ ' id ' : ' 1 '，' icon': '././images/image2.jpg '，' number': '20 '，' pingTiME ' : ' 2019-3-28 2:30336000 '，' time': '55267 '，' showList': 'false '，}，{ 'id': '2 '，' icon': '././images/image3.jpg '，' number': '4566 '，' PingTime ' : ' 2019-3-28 12:30:00 '，' time': '58934 '，' showList': 'false '，}，{ 'id': '3 '，' icon': '././images/image2.jpg '，' number': '20 '，' pingTiME ' : ' 2019-3-28 08336030336000 '，' time ' : ' 555234 '，' showList': 'false '，} ]，time:'30' }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ var那=这个。setdata({ listdata :数据。ping数据})那。setDownload()；那个。settimecount()；}，/** * 60s倒计时*/settimecount : function(){ 0让时间=这个。数据。时间时间；if(time=0){ time=0；}这个。setdata({ time : time })setTimeout(这。settimecount，1000)；}, /** * 倒计时*/setCountDown:函数(){让时间=1000让{ listData }=this . datalet list=listData . map((v，I)={ if(v . time=0){ v . time=0；}让格式化时间=这个。get format(v . time)；v .时间-=时间；五.倒计时=` $ {格式化时间。hh } : $ { format time。mm } : $ { format time。ss } `；返回五；})这个。setdata({ list data : list })；setTimeout(这个。设置倒计时，时间)；}, /** * 格式化时间*/getFormat:函数（毫秒){ let ss=parseInt(毫秒/1000);让ms=parseInt(毫秒% 1000);让mm=0；设hh=0；if(ss 60){ mm=ParSeint(ss/60)；ss=ParSeint(ss % 60)；if(mm 60){ hh=ParSeint(mm/60)；mm=ParSeint(mm % 60)；} } ss=ss 9？ss : ` 0 $ { ss }mm=mm 9？mm : ` 0 $ { mm }hh=hh 9？hh : ` 0 $ { hh }返回{ ss，mm，hh }；}})实现方法2:本着不想做菜鸟的心情，我在项目完成后由研究了下当初未完成的方法，即前端计算出时间差并将时间差数组作为原数组的属性加入循环遍历。当初一直不知如何在原数组中再添加一个数组作为它的一个属性。在之前的基础上将时间时间差作为一个属性放到原数组中

关键代码如下：

var PinDATa=该。数据。(var I=0；i pinData.lengthi ){ console.log('计算出长度为pindata。长度)变化结束时间=该。数据。ping数据[1].pingTime console.log('计算出长度为结束时间)那。query time(end time)var time=' PiNG DATa[' I '].时间到了。setdata({[time]:那。querytime(结束时间)，listData:pinData }) }新增计算时间差的方法：

查询时间：函数(pintime){ var start _ Date=new Date()；var end _ Date=新日期(平时间。替换(////g，'/')；var days=结束日期。gettime()-start _ date。gettime()；console.log('获取到时间差天数)返回天数；}之前困惑我的地方就是如何将时间差这个数组添加到原来的数组中，现在想想思路清晰，曾经的难题也不过尔尔。

index.js方法二修改后的代码

页面({ /** *页面的初始数据*/data : { ping data : [{ ' id ' : ' 1 '，' icon': '././images/image2.jpg '，' number': '20 '，' pingTiME ' : ' 2019-4-15 2:30336000 '，' time': '55267 '，' showList': 'false '，}，{ 'id': '2 '，' icon': '././images/image3.jpg '，' number': '4566 '，' PingTime ' : ' 2019-4-13 12:30:00 '，' time': '58934 '，' showList': 'false '，}，{ 'id': '3 '，' icon': '././images/image2.jpg '，' number': '20 '，' pingTiME ' : ' 2019-4-13 08336030336000 '，' time ' : ' 555234 '，' showList': 'false '，} ]，time:'60' }，/** *生命周期函数-监听页面加载*/onLoad:函数（选项){ var那=this var pinData=that。数据。ping data for(var I=0；i pinData.lengthi ){ console.log('计算出长度为pindata。长度)变化结束时间=该。数据。ping数据[1].pingTime console.log('计算出长度为结束时间)那。query time(end time)var time=' PiNG DATa[' I '].时间到了。setdata({[time]:那。querytime(结束时间)，listdata : pindata })}那。设置倒计时();那个。settimecount()；}，/** * 60s倒计时*/settimecount : function(){ 0让时间=这个。数据。时间时间；if(time=0){ time=0；}这个。setdata({ time : time })setTimeout(这。settimecount，1000)；}, /** * 倒计时*/setCountDown:函数(){让时间=1000让{ listData }=this . datalet list=listData . map((v，I)={ if(v . time=0){ v . time=0；}让格式化时间=这个。get format(v . time)；v .时间-=时间；五.倒计时=` $ {格式化时间。hh } : $ { format time。mm } : $ { format time。ss } `；返回五；})这个。setdata({ list data : list })；setTimeout(这个。设置倒计时，时间)；}, /** * 格式化时间*/getFormat:函数（毫秒){ let ss=parseInt(毫秒/1000);让ms=parseInt(毫秒% 1000);让mm=0；设hh=0；if(ss 60){ mm=ParSeint(ss/60)；ss=ParSeint(ss % 60)；if(mm 60){ hh=ParSeint(mm/60)；mm=ParSeint(mm % 60)；} } ss=ss 9？ss : ` 0 $ { ss }mm=mm 9？mm : ` 0 $ { mm }hh=hh 9？hh : ` 0 $ { hh }返回{ ss，mm，hh }；}，查询时间：函数(pintime){ var start _ Date=new Date()；var end _ Date=新日期(平时间。替换(////g，'/')；var days=结束日期。gettime()-start _ date。gettime()；console.log('获取到时间差天数)返回天数；}})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。