微信小程序多个倒计时

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

代码详解：

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);}
})

<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>

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;
}

微信小程序多个倒计时相关推荐

html倒计时代码+微信可用,微信小程序动态显示项目倒计时效果
本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: 剩余时间:已经截止剩余时间: ...
榛子云短信-微信小程序60秒倒计时插件
为了帮助开发者更便捷的使用微信小程序的短信验证码功能,特别是初学者更好的使用,榛子云短信特地开发了60秒倒计时插件,效果: 使用方法 1.引入插件countdown.js var CountDown ...
微信小程序60秒倒计时
大家可以直接使用插件: https://blog.csdn.net/zuoliangzhu/article/details/90140067 微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整 ...
微信小程序开发之倒计时定时器
微信小程序获取验证码,倒计时60秒!这个在微信中也经常遇到,因此给大家分享出来,逻辑就不过多的解释.这个是自定义的方法,大家在调用的时候,直接绑定在按钮上,直接this.getcode()一下就可以调 ...
微信小程序时间格式倒计时
Page({// 倒计时count_down: function (countDown_time){var that = this;var time = countDown_time.split(': ...
微信小程序之订单倒计时实现
倒计时之前在做一个有拼团功能项目的时候遇到过倒计时的问题,由于当时技术不熟在这方面耽搁了好些时间,所以这里整理出来希望能为后来人提供些许启发. 1.实现思路: 求出发起拼团时间与拼团结束时间的时间差 ...
uniapp实现微信小程序音频播放倒计时的功能，类似微信语音条
uniapp实现微信小程序音频播放功能最近需要有个项目需要用到音频播放,第一个想到的是audio标签,但是查阅了uniapp官方文档,发现audio组件已经不维护了. 官网推荐使用uni.creat ...
微信小程序 —— 验证码获取倒计时效果
wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode" ...
微信小程序中显示倒计时
wxml文件中: <view class="countDownTimeView countDownAllView" ><view ...

微信小程序多个倒计时

微信小程序多个倒计时相关推荐

最新文章

热门文章