原生javascript模仿win8等待提示圆圈进度条
更新时间：2014年04月24日 16:09:25 作者：
一直很中意win8等待提示圆圈进度条，下面本文就使用原生javascript模仿win8等待进度条,需要的朋友可以参考下
一、序言
一直很中意win8等待提示圆圈进度条。win8刚出来那会，感觉好神奇!苦于当时没思路，没去研究。通过最近网上找找资料，终于给搞出来了！先上Demo,献丑了！预览请看：win8进度条。
二、简单介绍
原生javascript编写，需要理解js基于面向对象编程和圆形坐标计算！
实现原理：把每个圆点抽象成一个对象（ProgressBarWin8类型），将每个圆点对象存在数组中（progressArray），延迟执行每个圆点对象的run方法，至于圆点运行速度越来越快，是通过改变定时器延迟毫秒数实现的。
// 判断元素x与圆心x坐标大小，设置定时器延迟时间
if (this.position.left < this.fixed.left) {
this.delay += .5;
} else {
this.delay -= .5;
}
还是上源码吧！表达能力实在不怎么好（代码中注释更详细，会看得更明白）。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>仿win8等待进度条</title>
<style>
body {
margin: 0;
padding: 0;
background: green
}
</style>
</head>
<body>
<script>
//********准备条件********
// 弧度角度转换公式：弧度=Math.PI*角度/180; js中Math.sin(),Math.cos()等函数，是根据弧度计算
// 圆x轴坐标计算公式:Math.cos(Math.PI * 角度/ 180) * 半径 + 圆心x轴坐标
// 圆y轴坐标计算公式:Math.sin(Math.PI * 角度/ 180) * 半径 + 圆心y轴坐标
//********准备条件********
// 圆点元素类（js中没有类的概念，这里模拟而已）
function ProgressBarWin8() {
// 圆心坐标
this.fixed = {
left: 0,
top: 0
};
// html标签元素坐标
this.position = {
left: 0,
top: 0
};
this.radius = 70; // 圆半径
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"
};
}
// js中每个函数都有个prototype对象属性，每个实例都可以访问
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;
}
};
// 不明白的，把后面的代码注释掉，先测试一个圆点运行情况
//new ProgressBarWin8().defaultSetting().run();
var progressArray = [], // 用于存放每个圆点元素对象数组，js中数组大小可变，类似于list集合
tempArray = [], // 用于存放progressArray抛出来的每个对象，窗口大小改变后，重置每个对象的圆心坐标
timer = 200; // 每隔多少毫秒执行一个元素对象run方法的定时器
// 创建圆点元素对象，存入数组中，这里创建5个对象
for (var i = 0; i < 5; ++i) {
progressArray.push(new ProgressBarWin8().defaultSetting());
}
// 扩展数组each方法，c#中的lambda大都是这样实现
Array.prototype.each = function (fn) {
for (var i = 0, len = this.length; i < len;) {
// 通过call(object,arg1,arg2,...)/apply(object,[arg1,arg2,...])方法改变函数fn内this的作用域， 以此可用于继承
fn.call(this[i++], arguments);// 或者：fn.apply(this[i++],arguments)
}
};
// 窗口大小改变事件，重置每个元素对象的圆心坐标
window.onresize = function () {
tempArray.each(function () {
this.fixed.left = window.innerWidth / 2;
this.fixed.top = window.innerHeight / 2;
});
};
// 每个多少毫秒执行数组集合的元素对象run方法
timer = setInterval(function () {
if (progressArray.length <= 0) {
// 清除此定时器，不然会一直执行（setTimeOut：延迟多少毫秒执行，一次；setInterval：每隔多少毫秒执行，多次）
clearInterval(timer);
} else {
// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var entity = progressArray.shift();
tempArray.push(entity);
// 执行每个元素对象的run方法
entity.run();
}
},timer);
</script>
</body>
</html>
一直很中意win8等待提示圆圈进度条。win8刚出来那会，感觉好神奇!苦于当时没思路，没去研究。通过最近网上找找资料，终于给搞出来了！先上Demo,献丑了！预览请看：win8进度条。
二、简单介绍
原生javascript编写，需要理解js基于面向对象编程和圆形坐标计算！
实现原理：把每个圆点抽象成一个对象（ProgressBarWin8类型），将每个圆点对象存在数组中（progressArray），延迟执行每个圆点对象的run方法，至于圆点运行速度越来越快，是通过改变定时器延迟毫秒数实现的。
复制代码 代码如下:
// 判断元素x与圆心x坐标大小，设置定时器延迟时间
if (this.position.left < this.fixed.left) {
this.delay += .5;
} else {
this.delay -= .5;
}
还是上源码吧！表达能力实在不怎么好（代码中注释更详细，会看得更明白）。
复制代码 代码如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>仿win8等待进度条</title>
<style>
body {
margin: 0;
padding: 0;
background: green
}
</style>
</head>
<body>
<script>
//********准备条件********
// 弧度角度转换公式：弧度=Math.PI*角度/180; js中Math.sin(),Math.cos()等函数，是根据弧度计算
// 圆x轴坐标计算公式:Math.cos(Math.PI * 角度/ 180) * 半径 + 圆心x轴坐标
// 圆y轴坐标计算公式:Math.sin(Math.PI * 角度/ 180) * 半径 + 圆心y轴坐标
//********准备条件********
// 圆点元素类（js中没有类的概念，这里模拟而已）
function ProgressBarWin8() {
// 圆心坐标
this.fixed = {
left: 0,
top: 0
};
// html标签元素坐标
this.position = {
left: 0,
top: 0
};
this.radius = 70; // 圆半径
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"
};
}
// js中每个函数都有个prototype对象属性，每个实例都可以访问
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;
}
};
// 不明白的，把后面的代码注释掉，先测试一个圆点运行情况
//new ProgressBarWin8().defaultSetting().run();
var progressArray = [], // 用于存放每个圆点元素对象数组，js中数组大小可变，类似于list集合
tempArray = [], // 用于存放progressArray抛出来的每个对象，窗口大小改变后，重置每个对象的圆心坐标
timer = 200; // 每隔多少毫秒执行一个元素对象run方法的定时器
// 创建圆点元素对象，存入数组中，这里创建5个对象
for (var i = 0; i < 5; ++i) {
progressArray.push(new ProgressBarWin8().defaultSetting());
}
// 扩展数组each方法，c#中的lambda大都是这样实现
Array.prototype.each = function (fn) {
for (var i = 0, len = this.length; i < len;) {
// 通过call(object,arg1,arg2,...)/apply(object,[arg1,arg2,...])方法改变函数fn内this的作用域， 以此可用于继承
fn.call(this[i++], arguments);// 或者：fn.apply(this[i++],arguments)
}
};
// 窗口大小改变事件，重置每个元素对象的圆心坐标
window.onresize = function () {
tempArray.each(function () {
this.fixed.left = window.innerWidth / 2;
this.fixed.top = window.innerHeight / 2;
});
};
// 每个多少毫秒执行数组集合的元素对象run方法
timer = setInterval(function () {
if (progressArray.length <= 0) {
// 清除此定时器，不然会一直执行（setTimeOut：延迟多少毫秒执行，一次；setInterval：每隔多少毫秒执行，多次）
clearInterval(timer);
} else {
// shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var entity = progressArray.shift();
tempArray.push(entity);
// 执行每个元素对象的run方法
entity.run();
}
},timer);
</script>
</body>
</html>
相关文章
这篇文章主要介绍了JS拖拽排序插件Sortable.js用法,结合实例形式分析了拖拽排序插件Sortable.js功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了json 字符串之间的相互转换 ,通过eval()函数可以将JSON字符串转化为对象，本需要的朋友可以参考下2014-08-08
这篇文章主要介绍了js中的继承及实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了小程序设置缓存并且不覆盖原有数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了如何利用Cesium实现卫星在轨绕行动画，文中的示例代码讲解详细，对我们了解Cesium有一定的帮助，感兴趣的可以尝试一下2022-06-06
Event altKey,ctrlKey,shiftKey属性解析
本篇文章主要是对Event altKey,ctrlKey,shiftKey属性解析了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了微信小程序里引入SVG矢量图标的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
showModalDialog模态对话框的使用详解以及浏览器兼容
showModalDialog是jswindow对象的一个方法，和window.open一样都是打开一个新的页面。区别是：showModalDialog打开子窗口后，父窗口就不能获取焦点了（也就是无法操作了）2014-01-01
这篇文章主要介绍了从零使用TypeScript开发项目打包发布到npm，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
前面突然看到 Object.defineProperty,就顺道想到 Proxy,然后就想到了观察者案例,这边还没有用 javascript编写一个观察者的案例呢,顺道加入了一个 event-bus 监听事件案例,凑一起看一看不同的实现方式,需要的朋友可以参考下2023-08-08
最新评论