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

浅浅的花香味﹌ 2022-05-31 10:42 790阅读 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 );

\},

[20180222115619220]: /images/20220531/b827e8adde6d466cbf17039bea90de4c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，790人围观）

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

相关阅读

相关 Flutter开发圆形计时进度条RingProgressBar

演示先看效果图： ![e02d4daf148c466291c29e2205451831.png][]![97770f6dd15d4708b342862682f9b7

约定不等于承诺〃/ 2024年03月26日 17:14/ 0 赞/ 87 阅读

相关微信小程序｜进度条

![180c301cd8284017b4b2ce284d1e83ff.png][] ![11471ea7c3e9417080aedb2ac0832c06.png][] > 进

た入场券/ 2023年10月14日 09:29/ 0 赞/ 33 阅读

相关微信小程序之拼团倒计时

// 计算时间 getTime() { // this.data.times为结束时间 let timestamp = Da

约定不等于承诺〃/ 2023年05月28日 15:50/ 0 赞/ 34 阅读

相关微信小程序环形进度条_微信小程序实现圆形进度条动画

本文实例为大家分享了微信小程序动画之圆形进度条，供大家参考，具体内容如下上图： ![Image 1][] 代码： js： //获取应用实例 var app = g

拼搏现实的明天。/ 2022年12月31日 15:25/ 0 赞/ 318 阅读

相关 h5 Canvas实现圆形时间倒计时进度条

在项目中，我们会遇到需要显示进度条或者倒计时的功能，我们今天就来实现一下。一、效果展示 ![在这里插入图片描述][20210321123517162.gif_pic_

骑猪看日落/ 2022年11月11日 13:20/ 0 赞/ 475 阅读

相关微信小程序实现倒计时

微信小程序倒计时 > 大家好，今天我们来学习一下倒计时的实现，好好看，好好学，超详细的。直接上代码吧 <view class="title-item">倒计

╰半橙微兮°/ 2022年10月09日 06:29/ 0 赞/ 229 阅读

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

效果如下图： ![20180222115619220][] var initNum = 7 ; //倒计时数 var spaceNum = 1000 ; //文字倒

浅浅的花香味﹌/ 2022年05月31日 10:42/ 0 赞/ 791 阅读

相关 JS 倒计时（微信小程序）

下面的例子是微信小程序的写法和web端的都是差不多的，只是显示在页面的写法不一样： var timer = null; /

阳光穿透心脏的1/2处/ 2022年05月11日 01:40/ 0 赞/ 302 阅读

相关微信小程序发送短信验证码倒计时

效果图 ![在这里插入图片描述][20200827154829168.gif_pic_left] WXML文件 <view class="containe

桃扇骨/ 2021年09月02日 05:52/ 0 赞/ 513 阅读

相关微信小程序活动倒计时

示例效果图： ![20200922140424928.png][] 案列效果图 ![20200922140349157.png][] 代码引用页： {

客官°小女子只卖身不卖艺/ 2021年07月24日 14:08/ 0 赞/ 491 阅读