原生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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jquery滚动特效集锦
Jun 03 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
js module大战
Apr 19 Javascript
Vue函数式组件的应用实例详解
Aug 30 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程序设计中的MVC编程思想
2014/07/28 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
PHP 图片处理
2020/09/16 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python如何读写csv数据
2018/03/21 Python
python实现维吉尼亚算法
2019/03/20 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
Python类成员继承重写的实现
2020/09/16 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
爱心倡议书范文
2014/05/12 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
党员个人承诺书
2015/04/27 职场文书
利用python做表格数据处理
2021/04/13 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL