首页 > 代码库 > HTML5实现方形及圆形倒计时进度条
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;
}
};
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://www.mamicode.com/Timer.js"></script>
<style>
#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;
}
</style>
</head>
<body>
<div>
<div>
<div></div>
</div>
</div>
<script>
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);
});
</script>
</body>
</html>
HTML5实现方形及圆形倒计时进度条