×

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

作者:天空2019.04.09来源:Web前端之家浏览:556评论: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人参与

发表评论:

最新留言

  • www.micai18.com

    写的很详细...

  • 子午物联网

    这个博客,由衷的喜欢...

  • 访客

    文章不错,非常喜欢...

  • cnwebe

    新媒体运营交换友情链接https://www.cnwebe.com换吗...

  • admin

    请加上链接...

  • admin

    已加上...

  • 物联网应用

    交换个链接如何?物联网应用www.ziwuiot.com...

  • zzzmh

    你好自己写的个人技术博客https://zzzmh.cn麻烦友链申请...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero