前言
圓環(huán)倒計(jì)時(shí)，支持圓環(huán)遞增和遞減兩種動(dòng)畫方式，兼容ie8以上
項(xiàng)目github源碼：https://github.com/chenshaomei/TimeCircle
使用方法
1、依賴
jquery.js, raphael.js, timeCircle.js, timeCircle.css
2、調(diào)用
html：
<div id="paper" class="processingbar"></div>
js：
// 創(chuàng)建一個(gè)圓環(huán)
var cricle3 = $.fn.circleCountDown.createCricle({
parent: $('#paper3'),
w: 180,
R: 80,
sW: 20,
color: "#3080ec",
bgColor:"#e5e5e5"
});
// 圓環(huán)倒計(jì)時(shí)
var option3 = {
cricle: cricle3, // 圓環(huán)
parent: $('#paper3'), // 承載圓環(huán)的容器
totalTime: 100, // 總的時(shí)間 s
remainTime: 100, // 剩余時(shí)間 = 結(jié)束時(shí)間 - 開始時(shí)間 s
startTime: 1495785600000, // 開始時(shí)間 ms
endTime: 1495788300000, // 結(jié)束時(shí)間 ms
currentTime: 1495785601000, // 當(dāng)前時(shí)間 ms
timeTxtAlign : 'vertical',
changeTime: 90 // 剩余90秒，圓環(huán)改變顏色
}
$.fn.circleCountDown.cricleCount(option3);
3、參數(shù)配置指引
/*
* 描述實(shí)現(xiàn)的功能：依賴 jquery.js raphael.js qexCircle.css
*
* 創(chuàng)建一個(gè)圓環(huán) ： 圓環(huán)的創(chuàng)建和倒計(jì)時(shí)分離，調(diào)用createCricle(option) ，返回該圓環(huán)
* 倒計(jì)時(shí) ：調(diào)用cricleCount(option)不會(huì)創(chuàng)建圓環(huán)，只改變圓環(huán)狀態(tài)； 有兩種方式，增加倒計(jì)時(shí) && 減少倒計(jì)時(shí)
*/
/*
* 創(chuàng)建圓環(huán)參數(shù)：$.fn.circleCountDown.createCricle(option);
*
* @params Object 配置指引：
* parent: Object 圓環(huán)進(jìn)度的容器對(duì)象
w: Number 圓環(huán)父級(jí)容器寬度
R: Number 圓環(huán)半徑大小
sW: Number 圓環(huán)寬度
bgColor: String 圓環(huán)背景色
color: String 圓環(huán)前景色
startProgressPos Number 圓環(huán)初始位置 100是最大值，默認(rèn)0 【非必須】
*
*
* 倒計(jì)時(shí)參數(shù)：$.fn.circleCountDown.cricleCount(option);
*
* @params Object 配置指引：
cricle: Object 創(chuàng)建的圓環(huán)
* parent: Object 圓環(huán)進(jìn)度的容器對(duì)象
totalTime: Number 總的倒計(jì)時(shí)時(shí)間 單位s
remainTime: Number 剩余時(shí)間 單位s
startTime: String 開始時(shí)間 時(shí)間戳ms 默認(rèn)0 【非必須】
endTime: String 結(jié)束時(shí)間 時(shí)間戳ms 默認(rèn)0 【非必須】
currentTime: String 當(dāng)前時(shí)間 時(shí)間戳ms 默認(rèn)0 【非必須】
endTxt: String 倒計(jì)時(shí)結(jié)束后顯示的文案
animateType: String 圓環(huán)動(dòng)畫形式：add 圓環(huán)遞增形式，cut 圓環(huán)遞減形式，默認(rèn)add 【非必須】
timeTxtAlign: String 圓環(huán)里文案顯示方式： vertical只能顯示分秒 默認(rèn)水平 horizontal就是橫向排列可以顯示到天【非必須】
callBack Function 倒計(jì)時(shí)結(jié)束后，回調(diào)函數(shù)【非必須】
changeTime Number 倒計(jì)時(shí)還剩多少秒，就變顏色 ，非必傳，不傳默認(rèn)不會(huì)變色【非必須】
changeColor String 倒計(jì)時(shí)還剩changeTime秒時(shí)，圓環(huán)變成什么顏色 默認(rèn)#ff6600【非必須】
*
*
*/
image.png
