之前帮一个群员解决倒计时的问题,分享过来给大家看看
1、让数字进行倒计时
2、让多个数字进行倒计时
3、让一个数组倒计时
4、优化倒计时的方法
5、把数字换成HH:ss的格式
这里我就直接上解决的代码
<view>
<view wx:for="{{total_micro_second}}">
<view class='row'>
<view>{{total_micro_second[index].t}}</view>
<view data-index='{{index}}' bindtap='timeZT'>{{item.ztText}}</view>
<view data-index='{{index}}' bindtap='timeStop'>{{item.tzText}}</view>
</view>
</view>
</view>
Page({
/**
* 页面的初始数据
*/
data: {
total_micro_second: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
var time = this.data.total_micro_second
var total_micro_second = "00:29"; //表示60秒倒计时,想要变长就把60修改更大
var total_micro_second2 = "00:35";
var date = {}
date.t = total_micro_second
date.f = true
date.ztText = "暂停"
date.tzText = "停止"
time.push(date)
var date2 = {}
date2.t = total_micro_second2
date2.f = true
date2.ztText = "暂停"
date2.tzText = "停止"
time.push(date2)
console.log("入前", time)
//这里是组装数据,也可以直接在data里面写死,实际情况是根据查询的结果进行生成
this.setData({
total_micro_second: time
})
setTimeout(function () {
for (var i in time) {
count_down(that, i);
}
}, 1000)
},
//时间暂停
timeZT: function (e) {
var index = e.currentTarget.dataset.index
var times = this.data.total_micro_second
console.log("暂停", index)
console.log("暂停的数据", times[index])
console.log(times[index].t)
if (times[index].t != "00:00") {
if (times[index].f) {
times[index].f = false
times[index].ztText = "继续"
} else {
times[index].f = true
times[index].ztText = "暂停"
}
this.setData({
total_micro_second: times
})
}
},
timeStop: function (e) {
var index = e.currentTarget.dataset.index
var times = this.data.total_micro_second
console.log("停止", index)
console.log("停止的数据", times[index])
if (times[index].f) {
times[index].f = false
times[index].tzText = "已停止"
times[index].t = "00:00"
}
// else {
// times[index].f = true
// times[index].t = "00:20"
// times[index].tzText = "停止"
// }
this.setData({
total_micro_second: times
})
}
})
function count_down(that, i) {
var times = that.data.total_micro_second
console.log(i, times)
if (times[i].f) { //为true
var tim = times[i].t.split(":");
var second = parseInt(tim[0]) * 60 //分钟
second += parseInt(tim[1]) //秒
//console.log("总时间", second)
if (second <= 0) { //可能存在2秒内的误差
times[i].t = "00:00"
times[i].f = false
that.setData({
total_micro_second: times
});
i = "S"
return;
}
second -= 1
var min = parseInt(second / 60)
var sec = second - parseInt(second / 60) * 60
times[i].t = fill_zero_prefix(min) + ":" + fill_zero_prefix(sec)
that.setData({
total_micro_second: times
});
}
// // 放在最后--
if (i != "S") {
setTimeout(function () {
count_down(that, i);
}, 1000)
}
}
// 位数不足补零
function fill_zero_prefix(num) {
return num < 10 ? "0" + num : num
}
/**
* 下划线
*/
//红色下划线
.U_red {
padding-bottom: 2rpx;app.wxss样式(我所有项目都会有这个)
border-bottom: 1px solid red;
}
//黑色下划线
.U_black {
padding-bottom: 2rpx;
border-bottom: 1px solid black;
}
//黑色上划线
.U_black_top {
padding-bottom: 2rpx;
border-top: 1px solid black;
}
//白色下划线
.U_white {
padding-bottom: 2rpx;
border-bottom: 1px solid white;
}
/**
* Test class
*/
//黑色边框
.border_black {
border: 1rpx solid black;
}
//红色边框
.border_red {
border: 1rpx solid red;
}
//白色圆角
.border_white {
border: 1rpx solid white;
border-radius: 30rpx;
}
//布局
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
//布局
.row_c {
display: flex;
flex-direction: row;
justify-content: center;
}
//布局
.row_content {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
//布局
.column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
//黑色
.bk {
color: black;
}
//字体加粗
.b_font {
font-weight: 600;
}
tip:
1、如有遇到新问题,可以在下方留言或者加QQ群437729329 进行咨询
2、如果有优化的童鞋可以在下方留言
3、如果有封装好的,也可以在下方留言