这是微信小程序的一个倒计时代码片段,但在苹果手机里,这个倒计时并不会显示!!
wechatide://minicode/QUV0k2mG7R2Q
原因是在苹果手机里时间戳的转换问题!!
可兼容苹果安卓手机的代码,重点:
let arr = that.data.gmtDate.split(/[- :]/);// that.data.gmtDate时间格式为'2018-08-07 10:23:00' let nndate = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]); nndate=Date.parse(nndate) let timeLeft = nndate- new Date();
以下 是兼容苹果安卓的js倒计时的微信小程序代码片段!!!
wechatide://minicode/E7jtE8mk7M2Z
代码详解:
JS代码:
let goodsList = [{ actEndTime: '2019-05-01 10:00:43' }, { actEndTime: '2018-09-01 11:00:00' }, { actEndTime: '2018-06-01 12:45:56' }, { actEndTime: '2018-07-01 15:00:23' }, { actEndTime: '2018-11-23 17:00:22' }, { actEndTime: '2018-09-14 19:00:44' }, { actEndTime: '2018-10-21 21:00:34' }, { actEndTime: '2018-11-17 09:00:37' }, { actEndTime: '2018-12-21 05:00:59' }, { actEndTime: '2018-9-19 07:00:48' }, { actEndTime: '2018-10-28 03:00:11' } ] Page({ data: { countDownList: [], actEndTimeList: [] }, onLoad() { let endTimeList = []; // 将活动的结束时间参数提成一个单独的数组,方便操作 goodsList.forEach(o => { endTimeList.push(o.actEndTime) }) this.setData({ actEndTimeList: endTimeList }); // 执行倒计时函数 this.countDown(); }, timeFormat(param) { //小于10的格式化函数 return param < 10 ? '0' + param : param; }, countDown() { //倒计时函数 // 获取当前时间,同时得到活动结束时间数组 let newTime = new Date().getTime(); let endTimeList = this.data.actEndTimeList; let countDownArr = []; // 对结束时间进行处理渲染到页面 endTimeList.forEach(o => { ///-----------------------------------------------------------------------------------------//// //计算时间戳方式一,(ios有bug) // let endTime = new Date(o).getTime(); //计算时间戳方式二,(兼容ios和android) let arr = o.split(/[- :]/); let nndate = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]); nndate = Date.parse(nndate) let endTime = nndate; ///----------------------------------------------------------------------------------------------------------/// let obj = null; // 如果活动未结束,对时间进行处理 if (endTime - newTime > 0) { let time = (endTime - newTime) / 1000; // 获取天、时、分、秒 let day = parseInt(time / (60 * 60 * 24)); let hou = parseInt(time % (60 * 60 * 24) / 3600); let min = parseInt(time % (60 * 60 * 24) % 3600 / 60); let sec = parseInt(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); } })
WXML:
<view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList"> 剩余 <text class='tui-conutdown-box'>{{item.day}}</text>天 <text class='tui-conutdown-box'>{{item.hou}}</text>时 <text class='tui-conutdown-box'>{{item.min}}</text>分 <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒 </view>
CSS
page{background-color: #eee;} .tui-countdown-content{ height: 50px; line-height: 50px; text-align: center; background-color: #fff; margin-top: 15px; padding: 0 15px; 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: 0 5px; } .tui-countdown-bg{ background-color: #DF0101; }
网友评论文明上网理性发言 已有0人参与
发表评论: