小程序倒计时封装

发表于 | 分类于 | | 阅读次数:
字数统计: 486字 | 阅读时长 ≈ 2分钟
函数介绍

  • setTimeout()

    用于在指定的毫秒数后调用函数或计算表达式。

    语法：setTimeout(code,millisec)

    code: 必需。要调用的函数后要执行的 JavaScript 代码串。

    millisec: 必需。在执行代码前需等待的毫秒数。

    提示：

    setTimeout() 只执行 code 一次。如果要多次调用，请让code自身再次调用setTimeout()

  • clearTimeout()

    可取消由 setTimeout() 方法设置的 timeout。

    语法：clearTimeout(id_of_settimeout)

    id_of_settimeout: 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

效果图
直接看countDownUtil.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// 总毫秒数
var totalMillisecond;
// 计时器
var countDownTimer;

/**
 *  millisecond：总毫秒数
 *  interval：间隔多少毫秒执行一次(1000、100、10)（1秒=1000毫秒）
 */
function countDown(millisecond, interval, callback) {
  totalMillisecond = millisecond;
  if (totalMillisecond <= 0) {
    callback("已结束");
    stopTimer();
    return;
  }
  callback(dateFormat(totalMillisecond, interval));
  countDownTimer = setTimeout(function () {
    totalMillisecond -= interval;
    countDown(totalMillisecond, interval, callback);
  }, interval);
}

/**
 * 取消倒计时
 */
function stopTimer() {
  clearTimeout(countDownTimer)
}

/**
 *  格式化时间 (eg：15:23:07 or 15:23:07:8 or 15:23:07:08)
 */
function dateFormat(millisecond, interval) {
  var second = Math.floor(millisecond / 1000);
  var hr = Math.floor(second / 3600);
  var min = fillZero(Math.floor((second - hr * 3600) / 60));
  var sec = fillZero((second - hr * 3600 - min * 60));
  if (interval < 1000) {
    var msec = Math.floor((millisecond % 1000) / interval);
    return (hr + ":" + min + ":" + sec + " " + msec);
  } else {
    return (hr + ":" + min + ":" + sec);
  }
}

/**
 * 补0
 */
function fillZero(num) {
  return num < 10 ? "0" + num : num
}

/**
 * 对外暴露接口
 */
module.exports = {
  countDown: countDown,
  stopTimer: stopTimer
}
下面看怎么使用

.wxss文件

1
2
3
4
5
6
/**index.wxss**/
.cout-down-sec {
  color: #ff3976;
  font-size: 28rpx;
  margin-top: 50rpx;
}

.wxml文件

1
2
3
4
<!--index.wxml-->
<view class="container">
  <view class="cout-down-sec">{{sec}}</view>
</view>

.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//index.js
var countDownUtl = require("../../utils/countDownUtil.js")
Page({
  data: {
    sec: ""
  },
  onLoad: function () {
    var that = this
    var totalMsec = 50000000 //倒计时的总毫秒数(通常根据业务获取或计算)
    countDownUtl.countDown(totalMsec, 1000, function (res){
        that.setData({
          sec:res
        })
    })
  }
})

代码地址

end