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

浅浅的花香味﹌ 2022-05-31 10:42 765阅读 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 条评论，765人围观）

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

相关阅读

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

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

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

相关微信小程序setTimeout实现无限循环倒计时

适用场景: 循环播放视频, 广告,等我这里用一个签到送积分场景广告视频来实现该效果: 我们先来看一下效果: ![watermark_type_ZmFuZ3poZW5n

Bertha 。/ 2022年11月29日 00:49/ 0 赞/ 726 阅读

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

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

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

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

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

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

相关小程序倒计时

直接调用函数，传入结束时间的时间戳即可在页面直接输出以下值 countDownDay 天 countDownHour 时 countDownMinute 分

我不是女神ヾ/ 2022年09月05日 04:18/ 0 赞/ 209 阅读

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

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

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

相关微信小程序--日期格式化和实现倒计时

首先看看日期怎么格式化第一种： Date.prototype.Format = function (fmt) { //author: meizz

分手后的思念是犯贱/ 2022年05月26日 02:05/ 0 赞/ 660 阅读

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

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

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

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

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

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

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

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

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