原生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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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上传文件,创建递归目录的实例代码
2013/10/18 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
javascript document.images实例
2008/05/27 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
Python实现截屏的函数
2015/07/26 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
几个Shell Script面试题
2014/04/18 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
大学生就业意向书范文
2014/04/01 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
法人委托书
2014/07/31 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
预备党员考察意见范文
2015/06/01 职场文书
Python time库的时间时钟处理
2021/05/02 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL