loading加载的代码

最新推荐文章于 2024-02-03 19:53:33 发布

weixin_30737433

最新推荐文章于 2024-02-03 19:53:33 发布

阅读量391

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yangwan/p/10265468.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
}
canvas{
background: aquamarine;
}
</style>
</head>
<body>
<div style=" padding-left: 600px;" id=‘loading_panl’>
<lable id="lbl_Info"></lable>
<canvas id="test" width=200 height=200></canvas>
</div>

<script type="text/javascript">
var deg = 0; //全局变量用来存放 canvas 绘制的角度
var test = function(deg,test){ //角度、 canvasid

//获取画布对象
var canvas2d = document.getElementById("test").getContext("2d");
//canvas绘制圆形进度
var r = deg*Math.PI/180;
//绘制文字 filltext( text，x,y)
canvas2d.fillText("正在玩命加载中. . . . ",65,140);
//填充颜色
canvas2d.fillStyle = "#B2DFF5";
//由于想让圆形动起来就要一直擦除重绘
// 区域自己控制一下
//手机需要在有限的屏幕中做很多事情还是精确到像素吧（有残留的一点点没清掉请将像素加上 0.5）
canvas2d.clearRect(0,0,200,122);
//开始绘制
canvas2d.beginPath();
//canvas的外圆颜色
canvas2d.strokeStyle = "#84F2ED";
//圆外框的宽度别太宽有点恶心
canvas2d.lineWidth = 2.5;
//canvas绘制弧形
canvas2d.arc(100,100,20,0-90*Math.PI/180,r-90*Math.PI/180,false);
canvas2d.fill();
canvas2d.stroke();
canvas2d.closePath();
};
//使用定时器让html5 canvas绘制圆形进度动起来
//此时你可以使用 ajax 来做请求了
Example:
$.ajax({
url:"",
data:{},
success(data)
{
// clearInterval(t);
//隐藏之前那个DIV咯
},
error:
{
// 提示页面那个lable 提示加载失败的原因 <要分手的时候理由即使牵强都没办法>
}

})

var t = setInterval(function(){
//循环给圆弧加角度
//如果你需要快就加的多一点吧
deg+=2;
//调用绘制方法
test(deg);
//转一圈还是N圈就看你的喜好了。
if(deg>=365){

deg=0;
}
},20);
$.ajax({
type:"get",
url:"",
async:true
});
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yangwan/p/10265468.html

weixin_30737433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
loading加载的代码

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> ...
复制链接

扫一扫