进度条
<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南