原生javascript模仿win8等待进度条。
一、序言
一直很中意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模仿win8等待进度条。的更多相关文章
- 混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条
混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...
- android 开发 制作弹出等待进度条
技术点: dialog:ProgressBar:animated-rotate: 弹出框: import com.carspeak.client.R; import android.app.Dialo ...
- Javascript 及 CSS3 实现进度条效果
Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...
- JavaScript入门学习(2)--进度条
<html> <style type="text/css"> #bar{width:0px; height:20px; background:#ee00ff ...
- windows phone之山寨win8圆形进度条
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...
- [html][javascript] 关于SVG环形进度条
下面是个例子: <style> .demo2{ transform-origin: center; transform: rotate(-90deg); transition: strok ...
- JS原生上传大文件显示进度条-php上传文件
JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_li ...
- 【Web】前端文件上传，带进度条
最近做项目发现,在文件上传的过程中,增加进度条,能大大改善用户体验.本例介绍带进度条的文件上传 环境搭建 参考:[Java]JavaWeb文件上传和下载. 原生ajax上传带进度条 <%@ pa ...
- web文件上传，带进度条
原生ajax上传带进度条 (百分比) <%@ page language="java" contentType="text/html; charset=UTF-8& ...
随机推荐
- android开发出现No Launcher activity found!解决方案
在AndroidManifest.xml中的中少了这段代码 <activity android:name=".MainActivity" android:label=&quo ...
- ecshop退出登录会清空购物车的bug优化，最完美解决方法
ecshop退出登陆后,会清空购物车,大家都应该知道有这样的勉强算bug的问题. 网上类似的教程相当多,但都有问题,说句不好听的,算是引新手入歧途! 总结网上方法如下: 1.修改init.php,把s ...
- [知识库分享系列] 三、Web（高性能Web站点建设）
知识库分享系列: [知识库分享系列] 二..NET(ASP.NET) [知识库分享系列] 一.开篇 分享介绍此知识库之所以为 Web 系列,因为和 .NET 没有完全的关系,其中的技术和实践实用于各种 ...
- windows下使用vim+ctags+taglist
最近在公司的同事指导下,学会使用这个东西编写代码,效率提高了不少.所以记录下来,方便大家使用. 1. 下载gvim74.exe文件,并安装.注意一般安装的路径中不要存在空格 2. 下载taglist_ ...
- 自己封装的android客户端http网络框架
整个框架是基于阿帕奇的httpclient搭建的,框架类图如下,我是用Astah Professional画出来,将项目导入,自动生成所有类关系图,还是挺方便的: 核心类是HttpManager和Ht ...
- EPLAN P8导线颜色的设置
P8里的导线应称为"连接",连接的颜色代表了其电位的传递路径,如可以给三相电源设置成黑色,PE设为绿色,N设为蓝色等等. P8中电位在连接和元器件中传递的方法是由元器件的连接点属 ...
- Android之布局onClick属性写法规则
/** Called when the user clicks the Send button */public void sendMessage(View view) { // Do some ...
- 最近新装系统windows8.1+Mac。。。还没装驱动就遇到一堆问题。。。
---恢复内容开始--- 1,刚开始装好了,后来莫名看不到磁盘了,原因:64位mac盘会丢失盘符,所以macdrive也看不到...解决:(将AF改为06,修改内容后改回AF,早知道这么简单就不用重新 ...
- wow7.1 xd 新手教程
本人第一次录游戏视频,很多地方说错了 第一节说奶量百万,其实是十万 目前上传去百度云,录了奶德,跟猫德 [https://pan.baidu.com/s/1jIsLlg6]
- iOS开发中一些常见的并行处理(转)
本文主要探讨一些常用多任务的最佳实践.包括Core Data的多线程访问,UI的并行绘制,异步网络请求以及一些在运行态内存吃紧的情况下处理大文件的方案等. 其实编写异步处理的程序有很多坑!所以,本文 ...