原生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 相关文章推荐
jQuery中after()方法用法实例
Dec 25 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
ztree+ajax实现文件树下载功能
May 18 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使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
Python连接Impala实现步骤解析
2020/08/04 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
健康教育评估方案
2014/05/25 职场文书
护校行动方案
2014/05/31 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
学雷锋活动简报
2015/07/20 职场文书
小学课改工作总结
2015/08/13 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
ES6 解构赋值的原理及运用
2021/05/25 Javascript