移动app定时环形倒计时

var timers1 = null;
var timers2 = null;
var timer_is_on = 0;

 

// 计时
function setTime(ctime, needtime, alltime) {
			var n = ctime;
			var needt = needtime;
			//		var ns = 60;
//					var percents = parseFloat(ns/100*1000);
//					timer('canvas_1', 0, 100, percents)
			//开始计时
			window.clearInterval(timers1);
			window.clearInterval(timers2);
			// setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
			timers1 = setInterval(function() {
				n++;
				var h = parseInt(n / 3600)
				var m = parseInt(n / 60 % 60);
				var s = parseInt(n % 60);
				$('.chargingstart').text(toDub(h) + ":" + toDub(m) + ":" + toDub(s));
				if(n == (alltime) || n > (alltime)) {
					window.clearInterval(timers1);
					$('.chargingstart').text(toDub(h) + ":" + toDub(m) + ":" + toDub(s));
				}
				//			percents = parseInt(n/60*100);
				//			window.onload = inte(percents);
			}, 1000);
			timers2 = setInterval(function() {
				needt--;
				var h = parseInt(needt / 3600)
				var m = parseInt(needt / 60 % 60);
				var s = parseInt(needt % 60);
				$('.chargingend').text(toDub(h) + ":" + toDub(m) + ":" + toDub(s));
				if(needt == 0 || needt < 0) {
					window.clearInterval(timers2);
					$('.chargingend').text(toDub(h) + ":" + toDub(m) + ":" + toDub(s));
				}
			}, 1000);
			//补零
			function toDub(n) {
				return n < 10 ? "0" + n : "" + n;
			}
		}

/*
		 * 执行定时任务
		 * id：画布id
		 * start：初始百分比
		 * end：结束百分比
		 * interval：时间间隔
		 */
		function timer(id, start, end, interval) {
			if(!timer_is_on) {
				window.setTimeout(function() {
					circle(id, start / 100);
					start++;
					if(start < end + 1) {
						timer(id, start, end, interval);
					}
				}, interval);
			}
		}

		function circle(id, percent) {
			var p = (percent * 100).toFixed(0);
			var c = document.getElementById(id);
			var cxt = c.getContext("2d");
			cxt.clearRect(0, 0, c.width, c.height);
			//生成圆形（底圆）
			cxt.fillStyle = "#D0D0D0";
			cxt.beginPath();
			cxt.moveTo(100, 100);
			cxt.arc(100, 100, 95, 0, Math.PI * 2, false);
			cxt.closePath();
			cxt.fill();
			//生成扇形
			cxt.fillStyle = "#0268BD";
			cxt.beginPath();
			cxt.moveTo(100, 100);
			if(percent == 1) {
				cxt.arc(100, 100, 95, 0, Math.PI * 2, false);
			} else if(percent == 0) {
				cxt.arc(100, 100, 95, 0, 0, true);
			} else {
				cxt.arc(100, 100, 95, Math.PI, Math.PI + Math.PI * 2 * percent, false);
			}
			cxt.closePath();
			cxt.fill();
			//生成圆形（上层园）
			cxt.fillStyle = "#FFFFFF";
			cxt.beginPath();
			cxt.moveTo(100, 100);
			cxt.arc(100, 100, 75, 0, Math.PI * 2, false);
			cxt.closePath();
			cxt.fill();
			//生成中间百分比文字
			cxt.font = "30px arial";
			cxt.fillStyle = "#000000";
			cxt.fillText(p + "%", 75, 110);
		}

// 清空canvas
function clearCanvas(id) {
			var c = document.getElementById(id);
			var cxt = c.getContext("2d");
			cxt.clearRect(0, 0, c.width, c.height);
		}

调用：

<canvas id="canvas_1" width="200" height="200"></canvas>

setTime(0, 60, 60);
circle('canvas_1', 0);
timer('canvas_1', 0, 100, 600);