首页 > 代码库 > 进度条
进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas"); //获取画布的id
canvas.width="1000"; //画布的宽度
canvas.height="1000"; //画布的高度
var context=canvas.getContext("2d");
var i=0; //旋转角度
var j=0;
var times=10; //定时器时间
function con(){
context.strokeStyle="#ff0000"; //画笔颜色
context.lineWidth="2"; //画笔宽度
context.beginPath(); //画布中开始子路径的一个新的集合
context.arc(300,300,150,0,2*Math.PI,true); //画圆
context.closePath(); //画布中结束子路径的一个集合
context.stroke();
}
function show(){
context.clearRect(0,0,1000,1000); //清除画布
con();
context.strokeStyle="#00ff00";
context.lineWidth="6";
context.beginPath();
context.arc(300,300,150,0,Math.PI/180*i,true);
context.stroke();
context.font="40px Arial"; //中间字体大小
var d=j;
var dd=String(d).lastIndexOf("."); //小数点出现的位置
var ddd=String(d).substr(0,dd); //取小数点之前的值，获得整数
context.fillText(ddd+"%",280,310);
i++;
j+=100/360;
if(i>180){
clearInterval(setint); //大于180清除计时器
times=30;
var setti=setTimeout(show,times); //启动单次计时器
}
if(i>360){
clearTimeout(setti);
location="http://www.baidu.com"; //大于360度后跳转百度页面
}
}
var setint=setInterval(show,times);
</script>
</body>
</html>
进度条