一、需求分析
① 生成用于倒计时的圆环,通过代码来控制圆环的倒计时进度。要做到重新进页面,圆环不会重新归零。
② 圆环中间会有倒计时
③ 倒计时的时间可以自定义
二、实现效果
三、实现过程
index.wxml 部分,使用 canvas 绘制两个圆环。以及显示中间的倒计时
<view class="loading-warp">
<canvas class="canvas" canvas-id="canvasCircle"></canvas>
<canvas class="canvas-mask" canvas-id="canvasRing"></canvas>
<view class="rate" wx:if="{{tem==1}}">{{hours}}时{{minute}}分</view>
<view class="rate" wx:if="{{tem==0}}">{{minute}}分{{second}}秒</view>
<view class="rate" wx:if="{{tem==-1}}">0分0秒</view>
</view>
index.js 里,先绘制白色圆环
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();
再计算出总时间、已经使用多久时间和还剩的时间。开始时间和结束时间可以自定义的
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; // 还剩的时间
计算出圆环进度条的开始位置和结束位置,以及圆环中间的时间
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)
绘制圆环倒计时文章来源:https://www.toymoban.com/news/detail-529653.html
// 绘制
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();
}
四、完整代码
csdn 上的地址:点击这里文章来源地址https://www.toymoban.com/news/detail-529653.html
到了这里,关于【微信小程序】圆环进度条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!