1.wechatide://minicode/QUV0k2mG7R2Q
2.这是微信小程序的一个倒计时代码片段,但在苹果手机里,这个倒计时并不会显示!!
3.原因是在苹果手机里时间戳的转换问题!!
4.可兼容苹果安卓手机的代码,重点:
letarrthat.data.gmtDate.split(/[-:]/);//that.data.gmtDate时间格式为'2018-08-0710:23:00'letnndatenewDate(arr[0],arr[1]-1,arr[2],arr[3],arr[4],arr[5]);nndateDate.parse(nndate)lettimeLeftnndate-newDate();5.以下是兼容苹果安卓的js倒计时的微信小程序代码片段!!!
6.wechatide://minicode/E7jtE8mk7M2Z
7.代码详解:
letgoodsList[{actEndTime:'2019-05-0110:00:43'},{actEndTime:'2018-09-0111:00:00'},{actEndTime:'2018-06-0112:45:56'},{actEndTime:'2018-07-0115:00:23'},{actEndTime:'2018-11-2317:00:22'},{actEndTime:'2018-09-1419:00:44'},{actEndTime:'2018-10-2121:00:34'},{actEndTime:'2018-11-1709:00:37'},{actEndTime:'2018-12-2105:00:59'},{actEndTime:'2018-9-1907:00:48'},{actEndTime:'2018-10-2803:00:11'}]Page({data:{countDownList:[],actEndTimeList:[]},onLoad(){letendTimeList[];//将活动的结束时间参数提成一个单独的数组,方便操作goodsList.forEach(o{endTimeList.push(o.actEndTime)})this.setData({actEndTimeList:endTimeList});//执行倒计时函数this.countDown();},timeFormat(param){//小于10的格式化函数returnparam10?'0'+param:param;},countDown(){//倒计时函数//获取当前时间,同时得到活动结束时间数组letnewTimenewDate().getTime();letendTimeListthis.data.actEndTimeList;letcountDownArr[];//对结束时间进行处理渲染到页面endTimeList.forEach(o{///-----------------------------------------------------------------------------------------//////计算时间戳方式一,(ios有bug)//letendTimenewDate(o).getTime();//计算时间戳方式二,(兼容ios和android)letarro.split(/[-:]/);letnndatenewDate(arr[0],arr[1]-1,arr[2],arr[3],arr[4],arr[5]);nndateDate.parse(nndate)letendTimenndate;///----------------------------------------------------------------------------------------------------------///letobjnull;//如果活动未结束,对时间进行处理if(endTime-newTime0){lettime(endTime-newTime)/1000;//获取天、时、分、秒letdayparseInt(time/(60*60*24));lethouparseInt(time%(60*60*24)/3600);letminparseInt(time%(60*60*24)%3600/60);letsecparseInt(time%(60*60*24)%3600%60);obj{day:this.timeFormat(day),hou:this.timeFormat(hou),min:this.timeFormat(min),sec:this.timeFormat(sec)}}else{//活动已结束,全部设置为'00'obj{day:'00',hou:'00',min:'00',sec:'00'}}countDownArr.push(obj);})//渲染,然后每隔一秒执行一次倒计时函数this.setData({countDownList:countDownArr})setTimeout(this.countDown,1000);}})viewclass'tui-countdown-content'wx:for"{{countDownList}}"wx:key"countDownList"剩余textclass'tui-conutdown-box'{{item.day}}/text天textclass'tui-conutdown-box'{{item.hou}}/text时textclass'tui-conutdown-box'{{item.min}}/text分textclass'tui-conutdown-boxtui-countdown-bg'{{item.sec}}/text秒/viewpage{background-color:#eee;}.tui-countdown-content{height:50px;line-height:50px;text-align:center;background-color:#fff;margin-top:15px;padding:015px;font-size:18px;}.tui-conutdown-box{display:inline-block;height:26px;width:26px;line-height:26px;text-align:center;background-color:#000;color:#fff;margin:05px;}.tui-countdown-bg{background-color:#DF0101;}
微信小程序多个倒计时-小程序实现倒计时-小程序倒计时功能
浏览量:1715
时间:
来源:AsBefore麦小兜
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!