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;}
微信小程序多个倒计时-小程序实现倒计时-小程序倒计时功能
浏览量:1827
时间:
来源:AsBefore麦小兜
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。
最新资讯
-

即速应用,赋能企业玩转微信小程序智慧经营
作为国内领军的智慧商业经营服务商,即速应用始终秉承“让每个企业都拥有自己的智慧店铺”的愿景,持续赋能更多企业玩转智慧经营。即速应用旗下拥有“小程序搭建工具-即速应用”、“私域流量专家-即客云”等产品,帮助商家打通互联网全生态营销闭环。 -

即客云2.0重磅更新,让微信小程序运营更简单!
即客云作为一款基于企业微信的第三方工具,现从多维度提供超过30种功能,自上线以来,已服务多家企业,受到一致好评。近期,我们根据客户反馈和市场调研正式推出升级版 即客云2.0!更新了私域运营SOP,群日历功能,批量拓客,客户雷达,消息推送,个人欢迎语,帮助企业更好运用企业微信;同时提升了社群运营工作标准化,提升运营效率,帮助企业实现客户增长,玩转私域流量。 -

零代码 + AI 双轮驱动|即速应用解锁人工智能小程序开发新范式
无需代码、无需 AI 算法功底,普通人也能快速搭建智能小程序。即速应用将人工智能与零代码开发深度融合,推出 AI 智能生成能力,用户通过自然语言描述需求,AI 自动生成小程序页面、功能模块与后台配置,覆盖商城、预约、同城、社区团购等全场景。平台内置 AI 智能推荐、智能客服、用户画像分析等能力,一键对接微信生态,打通视频号、企业微信、短信跳转,帮企业快速落地 AI 应用,抢占智慧经营先机,让每家企业都拥有 AI 驱动的智慧店铺。










