计时器与倒计时

一、计时器–00：00：00

data: {
        loanTime: '',  //设置定时器
        hours: '0' + 0,   // 时
        minute: '0' + 0,   // 分
        second: '0' + 0,    // 秒
    },
//计时函数
    setInterval: function () {
        const that = this
        var second = that.data.second
        var minute = that.data.minute
        var hours = that.data.hours
        that.data.loanTime = setInterval(function () {  // 设置定时器
            second++
            if (second >= 60) {
                second = 0  //  大于等于60秒归零
                minute++
                if (minute >= 60) {
                    minute = 0  //  大于等于60分归零
                    hours++
                    if (hours < 10) {
                        // 少于10补零
                        that.setData({
                            hours: '0' + hours
                        })
                    } else {
                        that.setData({
                            hours: hours
                        })
                    }
                }
                if (minute < 10) {
                    // 少于10补零
                    that.setData({
                        minute: '0' + minute
                    })
                } else {
                    that.setData({
                        minute: minute
                    })
                }
            }
            if (second < 10) {
                // 少于10补零
                that.setData({
                    second: '0' + second
                })
            } else {
                that.setData({
                    second: second
                })
            }
        }, 1000)
    }

        //开始计时   
        this.setInterval()
        //停止计时   调用即可
        clearInterval(this.data.loanTime)

二、30s倒计时

data: {
        //时间
        second: 30,
    },
 timer: function () {
        var that = this
        let set = setInterval(
            () => {
                this.setData({
                    second: this.data.second - 1
                })
                if (this.data.second < 10) {
                    this.setData({
                        second: '0' + this.data.second,
                    })
                }
                if (this.data.second == 0) {
                    //关闭
                    clearInterval(set)
                    this.setData({
                        flag: 0
                    })
                }
            }
            , 1000)
    }

效果图

wxml:

<view class="hear">
            <view class="container">
                <view class='progress_box'>
                    <canvas class="progress_bg" canvas-id="canvasProgressbg">
                    </canvas>
                    <canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas>
                    <view class="content">
                        <view class="top">实时心率</view>
                        <view class="cont">123</view>
                        <view class="bottom">123</view>
                    </view>
                </view>
            </view>
        </view>

WXSS：

.progress_box {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.progress_bg {
    position: absolute;
    width: 220px;
    height: 220px;
}

.progress_canvas {
    width: 220px;
    height: 220px;
}

.progress_text {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center
}

.container {
    padding: 0 auto !important;
}

.content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

JS：

data: {
        count: 0, // 设置 计数器 初始为0
        countTimer: null // 设置 定时器 初始为null
    },
    //背景圆环设置
    drawProgressbg: function () {
        // 使用 wx.createContext 获取绘图上下文 context
        var ctx = wx.createCanvasContext('canvasProgressbg')
        ctx.setLineWidth(8);// 设置圆环的宽度
        ctx.setStrokeStyle('#EFEFEF'); // 设置圆环的颜色
        ctx.setLineCap('round') // 设置圆环端点的形状
        ctx.beginPath();//开始一个新的路径
        ctx.arc(110, 110, 80, 0, 2 * Math.PI, false);
        //设置一个原点(100,100)，半径为90的圆的路径到当前路径
        ctx.stroke();//对当前路径进行描边
        ctx.draw();
    },
    //蓝色圆环设置
    drawCircle: function (step) {
        var context = wx.createCanvasContext('canvasProgress');
        var gradient = context.createLinearGradient(200, 100, 100, 200);
        gradient.addColorStop("1.0", "#6565F6");

        context.setLineWidth(10);
        context.setStrokeStyle(gradient);
        context.setLineCap('round')
        context.beginPath();
        // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
        context.arc(110, 110, 80, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
        context.stroke();
        context.draw()
    },
    //计时器
    countInterval: function () {
        // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
        this.countTimer = setInterval(() => {
            if (this.data.count <= 60) {
                /* 绘制彩色圆环进度条 
                注意此处 传参 step 取值范围是0到2，
                所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
                */
                this.drawCircle(this.data.count / (60 / 2))
                this.data.count++;
            } else {
                clearInterval(this.countTimer);
            }
        }, 500)
    },