微信小程序圆形进度条倒计时效果

浅浅的花香味﹌ 2022-05-31 10:42 854阅读 0赞

效果如下图：

20180222115619220

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 ();

},

二、倒计时

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 );

},

发表评论

表情：
评论列表 （有 0 条评论，854人围观）

还没有评论，来说两句吧...

相关阅读