原生javascript模仿win8等待提示圆圈进度条


Posted in Javascript onApril 24, 2014

一、序言

一直很中意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>
Javascript 相关文章推荐
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 #Javascript
jquery 扑捉回车键事件代码
Apr 24 #Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 #Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 #Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 #Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 #Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 #Javascript
You might like
php堆排序实现原理与应用方法
2015/01/03 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
Python常用小技巧总结
2015/06/01 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
Python 实现集合Set的示例
2020/12/21 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
业务主管岗位职责
2013/11/20 职场文书
董事长岗位职责
2013/11/30 职场文书
文言文形式的学生求职信
2013/12/03 职场文书
幼儿园门卫制度
2014/01/29 职场文书
客服部班长工作责任制
2014/02/25 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python