达维营-前端网加载等待效果
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>加载等待效果</title>
<style type="text/css"> body {
margin: 0;
padding: 0;
background: green
} </style>
<script type="text/javascript">
window.onload=function(){
function ProgressBarWin8(){
// 圆心坐标
this.fixed = {
left: 0,
top: 0
};
// html标签元素坐标
this.position = {
left: 0,
top: 0
};
this.radius = 20; // 圆半径
this.angle = 270; // 角度,默认270
this.delay = 30; // 定时器延迟毫秒
this.timer = null; // 定时器时间对象
this.dom = null; // html标签元素
// html标签元素样式， position需设置成absolute
this.style = {
position:"absolute",
width:"10px",
height:"10px",
background:"#fff",
"border-radius":"5px"
};
}
ProgressBarWin8.prototype={
run:function(){
if(this.timer){
clearTimeout(this.timer);
}
// 设置html标签元素坐标，即计算圆上的点x,y轴坐标
this.position.left = Math.cos(Math.PI*this.angle/180)*this.radius + this.fixed.left;
this.position.top = Math.sin(Math.PI*this.angle/180)*this.radius + this.fixed.top;
this.dom.style.left = this.position.left + "px";
this.dom.style.top = this.position.top + "px";
//改变角度
this.angle++;
//判断元素x与圆心x坐标大小，设置定时器延迟时间
if(this.position.left < this.fixed.left){
this.delay += .5;
}
else{
this.delay -= .5;
}
var scope = this;
// 定时器，循环调用run方法，有点递归的感觉
this.timer = setTimeout(function () {
// js中函数的调用this指向调用者，当前this是window
scope.run();
}, this.delay);
},
// html标签元素初始设置
defaultSetting: function () {
// 创建一个span元素
this.dom = document.createElement("span");
// 设置span元素的样式，js中对象的遍历是属性
for(var property in this.style){
// js中对象方法可以用.操作符，也可以通过键值对的方式
this.dom.style[property] = this.style[property];
}
//innerWidth innerHeight窗口中文档显示区域的宽度，不包括边框和滚动条,该属性可读可写。
//设置圆心x,y轴坐标，当前可视区域的一般，即中心点
this.fixed.left = window.innerWidth / 2;
this.fixed.top = window.innerHeight / 2;
// 设置span元素的初始坐标
this.position.left = Math.cos(Math.PI*this.angle / 180) * this.radius + this.fixed.left;
this.position.top = Math.sin(Math.PI*this.angle / 180) * this.radius + this.fixed.top;
this.dom.style.left = this.position.left + "px";
this.dom.style.top = this.position.top + "px";
// 把span标签添加到documet里面
document.body.appendChild(this.dom);
// 返回当前对象
return this;
}
};
var progressArray = [],
tempArray = [],
timer = 200;
for (var i=0;i< 5;++i){
progressArray.push(new ProgressBarWin8().defaultSetting());
}
Array.prototype.each=function(fn){
for(var i=0, len=this.length;i<len;){
fn.call(this[i++],arguments);
}
};
window.onresize=function(){
tempArray.each(function () {
this.fixed.left = window.innerWidth / 2;
this.fixed.top = window.innerHeight / 2;
});
};
timer=setInterval(function() {
if(progressArray.length <= 0){
clearInterval(timer);
}
else {
var entity = progressArray.shift();
tempArray.push(entity);
entity.run();
}
},timer);
}
</script>
</head>
<body>加载等待效果</body>
</html>