×

微信小程序:实现圆环+数字动态效果的倒计时

作者:天空2019.04.09来源:Web前端之家浏览:28061评论:0

微信小程序:实现圆环+数字动态效果的倒计时。看下效果图:

主要分享下JS如何写。首先你定义下变量。

var initNum = 7; //倒计时数
var spaceNum = 1000; //文字倒计时间隔
var space =1000; //环倒计时间隔

绘制canvas:

begin: - (1 / 2 * Math.PI),
pai2: 2 * Math.PI,
//canvas画圆环
drawRang: function (precent) {
var windowWidth = wx.getSystemInfoSync().windowWidth;
var poaitionX = wx.getSystemInfoSync().windowWidth/2;
var cxt_arc = this.cxt_arc;
cxt_arc.setLineWidth(10);
cxt_arc.setStrokeStyle('#ffffff');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(poaitionX, 30, 24, 0, this.pai2, false);//设置一个原点(106,106),半径为100的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边
var end = this.pai2 * precent +this.begin ;
if (precent==0){
end = this.pai2 * + this.begin
} else if (1 == precent){
cxt_arc.setFillStyle('white');
cxt_arc.setFontSize(25);
cxt_arc.fillText(this.data.countdownNum, poaitionX - 7, 40);
cxt_arc.draw();
return ;
}
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#F15A47');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(poaitionX, 30, 24, this.begin, end , true);
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.setFillStyle('white');
cxt_arc.setFontSize(25);
cxt_arc.fillText(this.data.countdownNum, poaitionX-7, 40);
cxt_arc.draw();
},

然后传入JS

countdown: function () {
    var that = this;
    that.rangRun = 0;
    clearInterval(that.cuntDownCir);
    that.cuntDownCir = setInterval(function () {
    var n=initNum - Math.floor(that.rangRun / spaceNum);
    var precent = that.rangRun / (initNum * spaceNum);
    that.setData({
    countdownNum: n
    });
    that.drawRang(precent);
    that.rangRun = that.rangRun + space;
    if (precent >= 1) {
    that.data.allowDo=false;
    clearInterval(that.cuntDownCir);
    }
    }, space);
},

OK,大家可以去试一试。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/wexin23842093840923840283.html

网友评论文明上网理性发言 已有0人参与

发表评论: