html圆圈倒计时,HTML5实现方形及圆形倒计时进度条

js代码

var Utils = {

//TODO:注意：0 == ‘‘为true

isNull: function (obj) {

if (typeof obj == ‘undefined‘ || obj == null || obj == ‘null‘ || obj == ‘NULL‘ || obj == ‘‘) {

return true;

} else {

return false;

}

},

};

var Timer = {

canvas: null,

config: {

lineWidth: 3,

shadowBlur: 3,

shadowColor: ‘yellow‘,

strokeStyle: ‘red‘

},

colorList: ["#FFFF99", "#B5FF91", "#94DBFF", "#FFBAFF", "#FFBD9D", "#C7A3ED", "#CC9898", "#8AC007", "#CCC007", "#FFAD5C"],

getAbsTop: function (obj) {

var top = obj.offsetTop;

while (obj.offsetParent != null) {

obj = obj.offsetParent;

top += obj.offsetTop;

}

return top;

},

getAbsLeft: function (obj) {

var left = obj.offsetLeft;

while (obj.offsetParent != null) {

obj = obj.offsetParent;

left += obj.offsetLeft;

}

return left;

},

/**

* target是目标dom, time是时长以s算

* */

startTimer: function (target, time, type, finishCall, config, os) {

var me = this;

me.setConfig(config);

var body = document.getElementsByTagName(‘body‘)[0];

var canvas = document.createElement(‘canvas‘);

body.appendChild(canvas);

canvas.id = ‘timer‘;

canvas.width = target.offsetWidth + 4;

canvas.height = target.offsetHeight + 4;

canvas.style.setProperty(‘top‘, (me.getAbsTop(target) - 2) + ‘px‘);

canvas.style.setProperty(‘left‘, (me.getAbsLeft(target) - 2) + ‘px‘);

var context = canvas.getContext(‘2d‘);

me.setCanvasStyle(context);

var timer;

if (type == ‘brick‘) {

timer = me.drawBrick(context, canvas, time, os, finishCall);

} else if (type == ‘circle‘) {

timer = me.drawCircle(context, canvas, time, os, finishCall);

} else {

return ‘no type‘;

}

return {

canvas: canvas,

timer: timer

};

},

setConfig: function (config) {

if (!Utils.isNull(config)) {

if (typeof config.lineWidth == ‘number‘) {

this.config.lineWidth = config.lineWidth;

}

if (typeof config.shadowBlur == ‘number‘) {

this.config.shadowBlur = config.shadowBlur;

}

if (!Utils.isNull(config.shadowColor)) {

this.config.shadowColor = config.shadowColor;

}

if (!Utils.isNull(config.strokeStyle)) {

this.config.strokeStyle = config.strokeStyle;

}

}

},

setClearColor: function (context) {

context.shadowColor = ‘#ffffff‘;

context.strokeStyle = ‘#ffffff‘;

},

setRandomLine: function (context) {

context.shadowColor = this.getColorByRandom();

context.strokeStyle = this.getColorByRandom();

},

setCanvasStyle: function (context) {

context.lineWidth = this.config.lineWidth;

context.shadowBlur = this.config.shadowBlur;

context.shadowColor = this.config.shadowColor;

context.strokeStyle = this.config.strokeStyle;

},

getColorByRandom: function () {

var me = this;

var colorIndex = Math.floor(Math.random() * me.colorList.length);

return me.colorList[colorIndex];

},

drawCircle: function (context, canvas, time, os, finishCall) {

var r = 0;

if (canvas.width > canvas.height) {

r = canvas.height / 2;

} else {

r = canvas.width / 2;

}

r = r - context.lineWidth;

var x = canvas.width / 2;

var y = canvas.height / 2;

var step = 0, startAngle = 0, endAngle, n = 200, add = Math.PI * 2 / n, counterClockwise = false;

var disTime;

if (os != ‘ios‘) {

disTime = time * 1000 / n;

} else {

disTime = time / n;

}

function drawArc(s, e) {

context.beginPath();

context.arc(x, y, r, s, e, counterClockwise);

context.stroke();

}

//TODO:会执行100次

var timer = setInterval(function () {

if (step <= n) {

endAngle = startAngle + add;

drawArc(startAngle, endAngle);

startAngle = endAngle;

++step;

} else {

clearInterval(timer);

if (typeof finishCall == ‘function‘) {

finishCall();

}

}

}, disTime);

return timer;

},

drawBrick: function (context, canvas, time, os, finishCall) {

context.lineTo(0, 0);

var x = 0, y = 0, isBack = false, cWidth = canvas.width, cHeight = canvas.height;

var zhouchang = (cWidth + cHeight) * 2;

var disTime;

if (os != ‘ios‘) {

disTime = time * 1000 / zhouchang;

} else {

disTime = time / zhouchang;

}

var timer1 = setInterval(function () {

if (y < cHeight && !isBack) {

++y;

} else if (x > cWidth || y > cHeight) {

clearInterval(timer1);

if (typeof finishCall == ‘function‘) {

finishCall();

}

} else if (x < 0 || y < 0) {

clearInterval(timer1);

if (typeof finishCall == ‘function‘) {

finishCall();

}

} else if (y == 0 && isBack) {

--x;

} else if (x == cWidth) {

isBack = true;

--y;

} else if (y == cHeight && !isBack) {

++x;

} else if (x == 0 && y == 0 && isBack) {

clearInterval(timer1);

if (typeof finishCall == ‘function‘) {

finishCall();

}

}

context.lineTo(x, y);

context.stroke();

}, disTime);

return timer1;

}

};

测试代码

#timer {

position: absolute;

}

.test {

width: 50px;

height: 50px;

margin-left: 100px;

margin-top: 100px;

border: 1px solid #000000;

}

.bg1{

width: 300px;

height: 300px;

margin-top: 200px;

margin-left: 100px;

border: 1px solid #000000;

}

.bg2{

width: 200px;

height: 200px;

margin-top: -10%;

margin-left: -10%;

border: 1px solid #000000;

}

var target = document.getElementsByClassName(‘test‘)[0];

var startTime = (new Date()).getTime();

Timer.startTimer(target, 5, ‘circle‘, function(){

var endTime = (new Date()).getTime();

console.log(‘total time:‘,endTime - startTime);

});

原文：http://my.oschina.net/lovelyBoy/blog/373621