今天实现了小程序的倒计时功能

基本是用了关于时间的API，实现了在带刻度的圆盘界面和基本的倒计时，也是上面结合了别人项目做的画圆形进度条的代码和带刻度的时钟的代码，并进行了修改才实现的。

主要存在的问题是，倒计时时间还不算太准，实现操作的代码不算太简洁

但这是改良版，之前是直接画圆，这次带刻度了，也是一点进步

它暂时的样子

首先，就是画刻度，这个是借鉴别人的项目，在别人的基础上进行修改，所以函数都是要查一查了解一下

drawMinute:function(num1,num2){

     var context = wx.createCanvasContext('canvasProgressBg');

     //  这一部分是画分针刻度的

    for (var i = 0; i < 60; i++) {

         context.save(); //保存当前画布状态

         context.beginPath();

         context.translate(110, 110); //重新映射画布原点（110，110）的位置

         context.rotate(i * 6 * Math.PI / 180);   //旋转当前绘图 里面参数为弧度

         context.setLineWidth(3); // 线的宽度

         context.setStrokeStyle('#fff'); //颜色

         context.moveTo(0, -95); //从这个点出发

        context.lineTo(0, -105); // 绘制线条到这个点 故长度为10

        context.stroke();

        context.closePath();

        context.restore(); //恢复最近一近的画布保存状态

   }

  //  这一部分是画12点那一个点的

  for (var n = 0; n < 1; n++) {

       context.save();

       context.beginPath();

       context.translate(110, 110);

       context.rotate(n * 90 * Math.PI / 180);

       context.setLineWidth(3);

       context.setStrokeStyle('#fff');

       context.moveTo(0, -85);

       context.lineTo(0, -105);

       context.stroke();

       context.closePath();

       context.restore();

  }

   context.setLineCap('round')

   context.stroke();

  context.draw();

}

这就是这一段代码实现的效果，一进入小程序就显示这种效果

接着是倒计时

 一开始用时间API获取时间，然后计算出毫秒数，占总数的比例，将这个比例参数传过去，进行画圆

假设总数是一小时

// 设置一开始的时间   这是获得最开始定义的时间

 

bindTimeChange: function (e) {
     this.setData({
         time: e.detail.value
     })
    var myDate = new Date("1970/01/01 " + e.detail.value + ":00");
    count = myDate.getMinutes() * 60 * 1000; //获取当前分钟数(0-59)
    if (count == 0) {
          this.setData({
               time: '   '
          })
    }
      this.countInterval();
},

每过一分钟就响应setInterval函数   相当于倒计时，过一分钟就减掉相应的毫秒数，再将这个值count传过去画圆

onLoad: function () {
       this.drawMinute();
       var that = this;
       setInterval(function () {
             if ((count - 60000) > 0) {
                      count -= 60000;
                      that.countInterval();
                      that.setData({
                             time: "00" + new Date(count).toString().substr(18, 3)
                       })
              }
             else if ((count - 60000) <= 0) {    //  时间倒计时为0之后
                    count = 0;
                   that.countInterval();
                   that.setData({
                            time: ' ',
                            rub: false,     //  左边的模式
                            fight: false,    //  右边的模式
                            disabled: true,      //  时间禁用
                            sliderDisabled: true,      //  力度禁用
                            sliderValue:0,            //  力度减为0
                   })
                   clearInterval();
           }
      }, 60000)
},
画圆函数
drawCircle: function (step) {
       var context = wx.createCanvasContext('canvasProgress');
       if (step != 0) {
             for (var j = 0; j <= (count / 60000); j++) {
                   context.save();
                   context.beginPath();
                   context.translate(110, 110);
                   context.rotate(j * 6 * Math.PI / 180);
                   context.setLineWidth(3);
                   context.setStrokeStyle('#f3715c');
                   context.moveTo(0, -95);
                   context.lineTo(0, -105);
                   context.stroke();
                   context.closePath();
                   context.restore();
           }
          for (var n = 0; n < 1; n++) {
                       context.save();
                      context.beginPath();
                      context.translate(110, 110);
                      context.rotate(n * 90 * Math.PI / 180);
                      context.setLineWidth(3);
                      context.setStrokeStyle('#f3715c');
                      context.moveTo(0, -85);
                      context.lineTo(0, -105);
                      context.stroke();
                      context.closePath();
                      context.restore();
           }
      }
      context.setLineCap('round')
      context.stroke();
      context.draw();
},
// 根据倒计时画圆
countInterval: function () {
       if (count >= 0) {
            this.setData({
                 a: count
             })
            countTimer: {
                  if (this.data.a <= 3600000) {
                          this.drawCircle(this.data.a / totalCount)
                  }
            }
     }
},

 基本实现的功能就是，选择了下面的模式之后，才能进行时间的选择力度的选择，所以一开始时间的选择和力度的选择是禁用的，或者时间倒计时为0后，这两个也是禁用的

具体的样式就不展示了，主要是实现的功能

 

没有刻度时的倒计时：

drawCircle: function (step) {
       var context = wx.createCanvasContext('canvasProgress');
       // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
      if (step != 0) {
            //   大概是这样，具体的被删掉了  画圆大概的步骤都要有，就是具体位置放置在画圆函数里面还是外面
            context.save();
            context.setLineWidth(10);
            context.setStrokeStyle('#f3715c');
            context.setLineCap('round')
            context.arc(110, 110, 100, - Math.PI / 2, 2 * step * Math.PI - Math.PI / 2, false);    //  重点画圆是这句
            context.stroke();
            context.draw();
       }
      else if (step = 0) { context.arc(110, 110, 100, 0, false); }
},
// 根据倒计时画圆
countInterval: function () {
       if (count >= 0) {
            this.setData({
                 a: count
             })
       countTimer: {
                 if (this.data.a <= 3600000) {
                          this.drawCircle(this.data.a / totalCount)
                 }
        }
     }
},