El subprograma WeChat implementa la función de cuenta regresiva

Este artículo implementa una función de cuenta regresiva de dos minutos en el subprograma WeChat (el tiempo se puede personalizar). Una vez que se completa el cronómetro, la página saltará automáticamente. El código es fácil de entender. Si hay más necesidades, se puede personalizar. y modificado El código fuente completo es el siguiente:

1. 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>

2. 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;
}

3.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;
  }
});