微信小程序做的圆环进度条

// index.js Page({ data: { tem: -1, //默认显示时分 }, onLoad: function () { this.runTime(); // 调用 }, onReady: function () { let cxt = wx.createCanvasContext('canvasCircle'); cxt.setLineWidth(3); cxt.setStrokeStyle('#ffffff'); //白色圆环 cxt.setLineCap('round'); cxt.beginPath(); cxt.arc(30, 30, 28, 0, 2 * Math.PI, false); cxt.stroke(); cxt.draw(); }, // 计时 runTime: function () { let that = this; clearInterval(that.data.timer); //清除定时器，避免小程序卡死 let nowTime = new Date();//当前时间 let startTime = "2022-11-13 11:00:00"; // 开始时间 let endTime = "2022-11-13 12:00:00"; // 结束时间 let ntime = nowTime.getTime(); //当前时间戳 let stime = new Date(startTime).getTime(); //开始时间戳 let etime = new Date(endTime).getTime(); //结束时间戳 let allTime = (etime - stime) / 1000; // 总时间 let alreadyTime = (ntime - stime) / 1000; // 查询已经使用多久时间 let noUsedTime = (etime - ntime) / 1000; // 还剩的时间 that.load(allTime, alreadyTime, noUsedTime); //审核完成后，才开始计时 }, /** * 圆环计时 */ load: function (allTime, alreadyTime, noUsedTime) { let that = this; let steps = 0, startAngle = 1.5 * Math.PI, endAngle = 0; // 圆形加载 if (steps < noUsedTime + 1) { //这里用that,同步数据,渲染页面 that.setData({ timer: setInterval(function () { let lastEnd = alreadyTime * 2 * Math.PI / allTime; //已经走的周长 // 已经走的 = 一直按照初始速度走的周长 + 初始位置 + 已经走过的周长 endAngle = steps * 2 * Math.PI / allTime + startAngle + lastEnd; drawing(startAngle, endAngle); steps++; // 天数位 let day = Math.floor(noUsedTime / 3600 / 24); let dayStr = day.toString(); if (dayStr.length == 1) dayStr = '0' + dayStr; // 小时位 let hr = Math.floor((noUsedTime - day * 3600 * 24) / 3600); let hrStr = hr.toString(); if (hrStr.length == 1) hrStr = '0' + hrStr; // 分钟位 let min = Math.floor((noUsedTime - day * 3600 * 24 - hr * 3600) / 60); let minStr = min.toString(); if (minStr.length == 1) minStr = '0' + minStr; // 秒位 let sec = noUsedTime - day * 3600 * 24 - hr * 3600 - min * 60; let secStr = sec.toString(); if (secStr.length == 1) secStr = '0' + secStr; that.setData({ hours: hrStr, minute: minStr, second: parseInt(secStr), }); noUsedTime--; if (noUsedTime < 3600) { //显示分秒 that.setData({ tem: 0 }) } else if (noUsedTime >= 3600) { that.setData({ //显示时分 tem: 1 }) } }, 1000) }) } // 绘制 function drawing(s, e) { let context = wx.createCanvasContext('canvasRing'); context.setLineWidth(3); context.setStrokeStyle('#FF0000'); //红色 context.setLineCap('round'); context.beginPath(); context.arc(30, 30, 28, s, e, false); //s起始角 e结束位置，通过改变 steps 值确定 context.stroke(); context.draw(); } }, })