前言：
在这篇笔记中，我们将聚焦于一个常见但又充满挑战的任务———倒计时功能的实现。
此次的独特之处在于，后端返回的时间单位是分钟。
需求是：将这些以分钟为单位的数据，转化为精确而生动的倒计时效果，为用户带来直观而精彩的体验。
一、背景
前段时间做的微信小程序项目，有一个考试答题页面，左上角显示考试倒计时，格式为00:00:00。后端返回的时间字段是以分钟为单位的数据。这就涉及到时间单位转换到问题。
该小程序项目是原生的。
二、需要实现的效果图
三、实现方案
- 首先先将后台返回的分钟数据转换成秒：
let minutes = that.data.minutes * 60; // that.data.minutes是后台返回的分钟数，我从接口拿到后，赋值到data中了
- 然后格式化时间，即把以秒为单位的时间转换为
00:00:00格式：
这里需要注意的一点是，时分秒的数据要始终保持两位数字的显示，所以需要对时分秒分别进行处理。
处理方式如下：
- 计算小时数，转化为整数：
var h = parseInt(times / 60 / 60);
// 如果小时数小于 10，要变成 0 + 数字的形式
h = h < 10 ? "0" + h : h;
- 计算分钟数，转化为整数：
var m = parseInt(times / 60 % 60);
// 如果分钟数小于 10，要变成 0 + 数字的形式
m = m < 10 ? "0" + m : m;
- 计算秒数，转化为整数：
var s = parseInt(times % 60);
// 如果秒钟数小于 10，要变成 0 + 数字的形式
s = s < 10 ? "0" + s : s;
- 最后将时分秒拼接在一起即可：
return h + ':' + m + ':' + s
下面附上完整代码，每一步我都标了注释：
// 格式化时间，保持两位数
formatTime(times){
//计算小时数 转化为整数
var h = parseInt(times / 60 / 60);
//如果小时数小于 10，要变成 0 + 数字的形式
h = h < 10 ? "0" + h : h;
//计算分钟数 转化为整数
var m = parseInt(times / 60 % 60);
//如果分钟数小于 10，要变成 0 + 数字的形式
m = m < 10 ? "0" + m : m;
//计算秒数 转化为整数
var s = parseInt(times % 60);
//如果秒钟数小于 10，要变成 0 + 数字的形式
s = s < 10 ? "0" + s : s;
return h + ':' + m + ':' + s
},
- 时间格式处理完成之后，就需要让时间动起来，倒计时时间毫无悬念的用到了
setInterval和clearInterval：
- 先声明一个变量
times，用于页面左上角倒计时的整体展示：
// 调用格式化时间的方法，将转换成秒的数据传入
let time = that.formatTime(minutes);
that.setData({
times: time
})
<view class="countDown">考试倒计时 <text>{{times}}</text></view>
- 时间结束时记得清除倒计时：
// 在`00:00:00`时会调用
if (minutes <= 0) {
// 调用清除倒计时
}
四、实现倒计时的全部代码
下面截图中，相同颜色的横线代表所调用的对应的方法，便于阅读。
按照上图的顺序，代码附上，可直接复制使用：
data: {
times: '', // 页面左上角倒计时展示
timer: '', // 计时器
minutes: '', // 考试时长（分钟)
},
onLoad: function (options) {
// 开始倒计时
this.countdown();
},
countdown() {
const that = this;
let minutes = that.data.minutes * 60;
that.data.timer = setInterval(() => {
let time = that.formatTime(minutes)
that.setData({
times: time
})
if (minutes <= 0) {
that.timeOutCount()
// 倒计时结束，强制交卷
that.getExamAdd()
return
}
minutes--
}, 1000)
},
// 格式化时间，保持两位数
formatTime(times){
//计算小时数 转化为整数
var h = parseInt(times / 60 / 60);
//如果小时数小于 10，要变成 0 + 数字的形式
h = h < 10 ? "0" + h : h;
//计算分钟数 转化为整数
var m = parseInt(times / 60 % 60);
//如果分钟数小于 10，要变成 0 + 数字的形式
m = m < 10 ? "0" + m : m;
//计算秒数 转化为整数
var s = parseInt(times % 60);
//如果秒钟数小于 10，要变成 0 + 数字的形式
s = s < 10 ? "0" + s : s;
return h + ':' + m + ':' + s
},
timeOutCount() {
const that = this;
clearInterval(that.data.timer)
},
五、总结
本文主要介绍了倒计时功能的实现逻辑，从时间转换、实时更新到界面展示，通过代码示例和详细解释，让大家清晰了解每一个步骤。完美实现了利用后端返回的分钟时间数据实现前端倒计时的方法。当然，实现方案有很多，本文这种也是想给大家提供一个思路。
以上，希望对大家有帮助！
