移动app定时环形倒计时

落日映苍穹つ 2022-02-05 02:06 190阅读 0赞

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);
    		}

调用：

setTime(0, 60, 60);  
circle('canvas\_1', 0);  
timer('canvas\_1', 0, 100, 600);