微信小程序实现倒计时功能

本文实现了一个在微信小程序中两分钟倒计时（时间可自定义）的功能，计时完毕后自动跳转页面，代码易懂，如有更多需求可自定义修改，完整源码如下：

一、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;
  }
});