本文实现了一个在微信小程序中两分钟倒计时(时间可自定义)的功能,计时完毕后自动跳转页面,代码易懂,如有更多需求可自定义修改,完整源码如下:
一、wxml
<view class="wrap">
<view class="circle-box">
<canvas class="circle" style="width:200px; height:200px;" canvas-id="canvasArcCir"></canvas>
<canvas class="circle" style="z-index: -5; width:200px; height:200px;" canvas-id="canvasCircle"></canvas>
<view class="timer">{{time}}</view>
<view class="remaining-time">剩余时间</view>
<view class="description">{{description}}</view>
</view>
</view>
二、wxss
.wrap {
width: 100%;
height: 100vh;
background-color: #FFEBCD;
border: black 1px solid;
}
.circle-box {
text-align: center;
margin-top: 10vw;
}
.circle {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.timer {
text-align: center;
font-size: 24px;
margin-top: 40%;
padding-top: 19%;
font-size: 40px;
}
.remaining-time {
text-align: center;
font-size: 18px;
margin-top: 10px;
color: #CD853F;
}
.description {
text-align: center;
font-size: 16px;
margin-top:15%;
color: #999;
}
三、js
var app = getApp();
var interval;
var varName;
var ctx;
var totalTime = 120; // 倒计时总时间
var step = 2 * Math.PI / totalTime; // 每秒钟递增的弧度
Page({
data: {
time: '02:00',
description: '倒计时结束后自动跳转下一页',
progress: 0
},
drawCircle: function () {
clearInterval(varName);
var startAngle = 1.5 * Math.PI;
var endAngle = 1.5 * Math.PI;
ctx.setLineWidth(5);
ctx.setStrokeStyle('#87CEEB');
ctx.setLineCap('round');
function drawArc(endAngle) {
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.arc(100, 100, 96, startAngle, endAngle, true);
ctx.stroke();
ctx.draw();
}
var animation = function () {
if (totalTime > 0) {
endAngle -= step;
drawArc(endAngle);
totalTime--;
var minutes = Math.floor(totalTime / 60);
var seconds = totalTime % 60;
var formattedTime = `${this.formatTime(minutes)}:${this.formatTime(seconds)}`;
this.setData({
time: formattedTime,
progress: (120 - totalTime) / 120 * 100 // 计算进度百分比并更新数据
});
} else {
clearInterval(varName);
this.setData({
description: '倒计时已结束,正在跳转...'
});
setTimeout(() => {
wx.navigateTo({
url: '/pages/title_question/title_question'
});
}, 1000); // 倒计时结束后延迟1秒跳转
}
}.bind(this);
drawArc(endAngle);
varName = setInterval(animation, 1000);
},
onReady: function () {
ctx = wx.createCanvasContext('canvasArcCir');
var cxt_arc = wx.createCanvasContext('canvasCircle');
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#FFDAB9'); // 设置描边颜色为与背景颜色相近的颜色
cxt_arc.setLineCap('round');
cxt_arc.beginPath();
cxt_arc.arc(100, 100, 96, 2 * Math.PI, 0, true); // 使用逆时针方式绘制
cxt_arc.stroke();
cxt_arc.draw();
this.drawCircle(); // 调用绘制函数开始动态绘制
},
formatTime: function (time) {
return time < 10 ? '0' + time : time;
}
});