您的位置:首页 > 移动开发 > 微信开发

微信小程序实现倒计时,苹果手机不显示

2018-07-26 13:15 911 查看

JS页面代码段:

[code]const app = getApp()
let goodsList = [
{ actEndTime: '2018-07-21 21:00:34' },
{ actEndTime: '2028-07-17 21:00:37' },
{ actEndTime: '2018-09-21 05:00:59' },
{ actEndTime: '2018-08-19 07:00:48' },
{ actEndTime: '2018-08-28 03:00:11' }
]
Page({

data: {
countDownList: [],
actEndTimeList: []
},

onLoad: function () {
let endTimeList = [];
// 将活动的结束时间参数提成一个单独的数组,方便操作
goodsList.forEach(o => { endTimeList.push(o.actEndTime) })
this.setData({ actEndTimeList: endTimeList });
// 执行倒计时函数
this.countDown();
},

//当时间小于两位数时十位数补零。
timeFormat: function (param) {//小于10的格式化函数
return param < 10 ? '0' + param : param;
},

//倒计时函数
countDown: function () {
// 获取当前时间,同时得到活动结束时间数组
let newTime = new Date().getTime();//当前时间
let endTimeList = this.data.actEndTimeList;//结束时间的数组集合
let countDownArr = [];//初始化倒计时数组

// 对结束时间进行处理渲染到页面
endTimeList.forEach(o => {
let endTime = new Date(o).getTime();
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页面代码段

[code]<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>

 

wxss页面代码段

[code]page{
background: #f5f5f5;
}
.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:#ccc;
color: #000;
margin: 0 5px;
}
.tui-countdown-bg{
background: red;
color: #fff;
}

.container{
width: 100%;
display: flex;
justify-content: center;
}
.backView{
width:690rpx;
background: #fff;
display: flex;
flex-direction: column;
margin-bottom: 30rpx;
}
.createDate
{
background: #f5f5f5;
padding:15rpx 15rpx 10rpx 15rpx;
line-height: 50rpx;
font-size: 28rpx;
color: gainsboro;
text-align: center;
}
.backViewitem1{

display: flex;
flex-direction: row;
height: 55rpx;
align-items: center;
padding:8rpx 40rpx;
border-bottom: 2rpx solid #f5f5f5;
}
.ico
{
width:35rpx;
height:35rpx;
}
.name
{
color: #c13176;
margin-left: 20rpx;
font-size: 28rpx;
}

.details
{
font-size:24rpx;
letter-spacing: 2rpx;

}
.backViewitem2{

display: flex;
flex-direction: row;
line-height: 35rpx;
min-height:  70rpx;
padding: 15rpx 40rpx 10rpx 40rpx;
border-bottom: 2rpx solid #f5f5f5;
}
.details1
{
color:#888;
font-size:23rpx;
letter-spacing: 2rpx;

}

 

 

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: