SVG圆环倒计时,兼容ie8以上

前言

圆环倒计时，支持圆环递增和递减两种动画方式，兼容ie8以上
项目github源码：https://github.com/chenshaomei/TimeCircle

使用方法

1、依赖

jquery.js, raphael.js, timeCircle.js, timeCircle.css

2、调用

html：
<div id="paper" class="processingbar"></div>

js：
// 创建一个圆环
var cricle3 = $.fn.circleCountDown.createCricle({
    parent: $('#paper3'),
    w: 180,
    R: 80,
    sW: 20,
    color: "#3080ec",
    bgColor:"#e5e5e5"
});

// 圆环倒计时
var option3 = { 
    cricle: cricle3,            // 圆环
    parent: $('#paper3'),           // 承载圆环的容器
    totalTime: 100,             // 总的时间 s
    remainTime: 100,            // 剩余时间 = 结束时间 - 开始时间 s
    startTime: 1495785600000,       // 开始时间 ms
    endTime: 1495788300000,         // 结束时间 ms
    currentTime: 1495785601000,     // 当前时间 ms
    timeTxtAlign : 'vertical',
    changeTime: 90                      // 剩余90秒，圆环改变颜色

}
$.fn.circleCountDown.cricleCount(option3);

3、参数配置指引

    /*
    *   描述实现的功能：依赖 jquery.js  raphael.js  qexCircle.css
    *
    *   创建一个圆环 ： 圆环的创建和倒计时分离，调用createCricle(option) ，返回该圆环
    *   倒计时 ：调用cricleCount(option)不会创建圆环，只改变圆环状态； 有两种方式，增加倒计时 && 减少倒计时 
    */ 


    /*
    *  创建圆环参数：$.fn.circleCountDown.createCricle(option);
    *
    *  @params Object 配置指引：
    *           parent:          Object    圆环进度的容器对象   
                w:               Number    圆环父级容器宽度
                R:               Number    圆环半径大小
                sW:              Number    圆环宽度
                bgColor:         String    圆环背景色
                color:           String    圆环前景色
                startProgressPos Number    圆环初始位置 100是最大值，默认0 【非必须】
    *
    *
    *  倒计时参数：$.fn.circleCountDown.cricleCount(option);
    *
    *  @params Object 配置指引：
                cricle:         Object    创建的圆环 
    *           parent:         Object    圆环进度的容器对象   
                totalTime:      Number    总的倒计时时间 单位s
                remainTime:     Number    剩余时间  单位s
                startTime:      String    开始时间 时间戳ms 默认0 【非必须】
                endTime:        String    结束时间 时间戳ms 默认0 【非必须】
                currentTime:    String    当前时间 时间戳ms 默认0 【非必须】
                endTxt:         String    倒计时结束后显示的文案
                animateType:    String    圆环动画形式：add 圆环递增形式，cut 圆环递减形式，默认add 【非必须】
                timeTxtAlign:   String    圆环里文案显示方式： vertical只能显示分秒 默认水平 horizontal就是横向排列可以显示到天【非必须】
                callBack        Function  倒计时结束后，回调函数【非必须】
                changeTime      Number    倒计时还剩多少秒，就变颜色 ，非必传，不传默认不会变色【非必须】
                changeColor     String     倒计时还剩changeTime秒时，圆环变成什么颜色 默认#ff6600【非必须】
    *
    *
    */

image.png