微信小程序实现倒计时
效果图是这样的
实现思路 一、
求出发起拼团时间与拼团结束时间的时间差
时间每秒递减使用了 setTimeout(this.setTimeCount,1000);这个函数，让这个函数每隔一秒执行一次。
index.wxml
<view class="content"> <block wx:for="{{listData}}" wx:key="idx" wx:for-item="item" wx:for-index="{{idx}}"> <view class="tip"> <view class="dis"> <view class=‘dis_time left‘>剩余时间：{{item.countDown}}</view> </view> </view> </block> </view>
index.wxss
page { height: 100%; background: #fff; position: relative; } .item { height: 4%; background: #fff; text-align: center; } .content { border: 1px solid rgb(167, 159, 159); background: #F6F8F8; margin-bottom: 300rpx; border-bottom: none; } .no { text-align: center; position: absolute; top: 8%; z-index: -11; } .tip { position: relative; background: #fff; width: 100%; height: 100rpx; margin-bottom: 5rpx; padding: 20rpx 0; border-bottom: 1px solid gainsboro; } .isShow { /* display: none; */ } .dis { width: 100%; font-size: 35rpx; color: #009FE5; box-sizing: border-box; } .dis_time { width: 50%; }
index.js
Page({ // 页面的初始数据 data: { pingData: [{ "time": "3599000", }], }, // 生命周期函数--监听页面加载 onLoad: function (options) { this.setData({ listData: this.data.pingData }) this.setCountDown(); }, // 倒计时 setCountDown: function () { let time = 1000; let { listData } = this.data; let list = listData.map((v, i) => { if (v.time <= 0) { v.time = 0; } let formatTime = this.getFormat(v.time); v.time -= time; v.countDown = `${formatTime.mm}分${formatTime.ss}秒`; return v; }) this.setData({ listData: list }); setTimeout(this.setCountDown, time); }, // 格式化时间 getFormat: function (msec) { let ss = parseInt(msec / 1000); let mm = 0; if (ss > 60) { mm = parseInt(ss / 60); ss = parseInt(ss % 60); if (mm > 60) { mm = parseInt(mm % 60); } } ss = ss > 9 ? ss : `0${ss}`; mm = mm > 9 ? mm : `0${mm}`; return { ss, mm, }; } })
实现思路 二、
若是要实现单个倒计时如60s发送验证码倒不是很难，难的是多条倒计时。
获取这个时间差time后我们就可以将它处理后放入数组循环。这样做的好处是前端不用将time作为一个属性添加到原数组中。
效果图是这样的
index.wxml
<view class="item">单条倒计时:{{time}}</view> <view class="item">多条倒计时</view> <view class=‘no‘>暂无任何记录</view> <view class="content"> <block wx:for="{{listData}}" wx:key="idx" wx:for-item="item" wx:for-index="{{idx}}"> <view class="tip {{item.time<=0?‘isShow‘:‘‘}}"> <view class="dis"> <view class=‘dis_time left‘>剩余时间：{{item.countDown}}</view> </view> </view> </block> </view>
index.wxss
page { height: 100%; background: #fff; position: relative; } .item { height: 4%; background: #fff; text-align: center; } .content { border: 1px solid rgb(167, 159, 159); background: #F6F8F8; margin-bottom: 300rpx; border-bottom: none; } .no { text-align: center; position: absolute; top: 8%; z-index: -11; } .tip { position: relative; background: #fff; width: 100%; height: 100rpx; margin-bottom: 5rpx; padding: 20rpx 0; border-bottom: 1px solid gainsboro; } .isShow { display: none; } .dis { width: 100%; font-size: 35rpx; color: #009FE5; box-sizing: border-box; } .dis_time { width: 50%; }
index.js
Page({ /** * 页面的初始数据 */ data: { pingData: [{ "id": "1", "icon": "../../images/image2.jpg", "number": "20", "pingTime": "2019-3-28 23:30:00", "time": "55267", "showList": "false", }, { "id": "2", "icon": "../../images/image3.jpg", "number": "4566", "pingTime": "2019-3-28 12:30:00", "time": "58934", "showList": "false", }, { "id": "3", "icon": "../../images/image2.jpg", "number": "20", "pingTime": "2019-3-28 08:30:00", "time": "555234", "showList": "false", } ], time: "30" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this that.setData({ listData: that.data.pingData }) that.setCountDown(); that.setTimeCount(); }, /** * 60s倒计时 */ setTimeCount: function () { let time = this.data.time time--; if (time <= 0) { time = 0; } this.setData({ time: time }) setTimeout(this.setTimeCount, 1000); }, /** * 倒计时 */ setCountDown: function () { let time = 1000; let { listData } = this.data; let list = listData.map((v, i) => { if (v.time <= 0) { v.time = 0; } let formatTime = this.getFormat(v.time); v.time -= time; v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`; return v; }) this.setData({ listData: list }); setTimeout(this.setCountDown, time); }, /** * 格式化时间 */ getFormat: function (msec) { let ss = parseInt(msec / 1000); let ms = parseInt(msec % 1000); let mm = 0; let hh = 0; if (ss > 60) { mm = parseInt(ss / 60); ss = parseInt(ss % 60); if (mm > 60) { hh = parseInt(mm / 60); mm = parseInt(mm % 60); } } ss = ss > 9 ? ss : `0${ss}`; mm = mm > 9 ? mm : `0${mm}`; hh = hh > 9 ? hh : `0${hh}`; return { ss, mm, hh }; } })
内容参考：https://www.jb51.net/article/163535.htm
微信小程序实现倒计时
原文：https://www.cnblogs.com/dk-blog/p/14769051.html