原生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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
广告代码静态化js通用函数
May 09 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
原生JS实现层叠轮播图
May 17 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
Vue侦测相关api的实现方法
May 22 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注释实例技巧
2008/10/03 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
大二学期个人自我评价
2014/01/13 职场文书
2014年高考决心书
2014/03/11 职场文书
先进班组材料范文
2014/12/25 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
物资采购管理制度
2015/08/06 职场文书
2016年元旦寄语
2015/08/17 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
asyncio异步编程之Task对象详解
2022/03/13 Python