前言
圆环倒计时，支持圆环递增和递减两种动画方式，兼容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
