原生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>
相关推荐
-
JS 进度条效果实现代码整理
第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa
-
javascript 实现页面加载进度条代码
New Document 加载中,请耐心等待 '); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // --> 欧文加油! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js实现进度条的方法
本文实例讲述了js实现进度条的方法.分享给大家供大家参考.具体实现方法如下: 1.setTimeout和clearTimeout <html> <head> <title>进度条</title> <style type="text/css"> .container{ width:450px; border:1px solid #6C9C2C; height:25px; } #bar{ background:#95CA0D; f
-
JavaScript实现网页头部进度条刷新
本文刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲染过程中来,所以只是一个表象,并不是说这个显示完了就浏览器也加载完了所以资源. 效果图: 先看下html: 就两个标签 <div id="barbg"> <div id="bar"> </div> </div> CSS: 布局也很简单 <style> *{margin:0;padding:0;} #barbg{height:5px; bac
-
javascript 进度条 实现代码
首先:建立两个类,一个是用来与资料进行连接(数据层),另一个是用来关联前一个类与页面的(逻辑层) 新建一个JScsrip.js 文件 代码如下: 复制代码 代码如下: function setPgb(pgbID, pgbValue,pvalues) { if ( pgbValue <= pvalues ) { if (lblObj = document.getElementById(pgbID+'_label')) { lblObj.innerHTML =Math.ceil((pgbValue/
-
原生javascript模仿win8等待提示圆圈进度条
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数
-
Android开发之模仿微信打开网页的进度条效果(高仿)
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,进度条的缓慢动画效果,它不是生硬地一滑而过,而是用户体验很好,有个速度的变化,由慢到快的效果,语言难于描述,相信各位都有下载微信,可以随便打开个公众号的文章看看效果. 好了,上面说到,之前网上的方法都是都忽略了微信加载网页时,进度条的缓慢动画效果,实现代码也是
-
JavaScript实现可拖拽的进度条
本文实例为大家分享了JavaScript实现可拖拽的进度条的具体代码,供大家参考,具体内容如下 一.进度条实现 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
-
JavaScript canvas绘制圆形加载进度条
本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body { text-align: center; } can
-
原生JavaScript实现Tooltip浮动提示框特效
使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点: 显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示出来 隐藏:鼠标移开时,ToolTip提示框自动隐藏 定位:ToolTip提示框的位置需要根据ToolTip超链接的位置来设置 可配置:ToolTip提示框可以根据参数不同,改变尺寸和显示内容 注意点: 1)border-radius和 box-shadow兼容写法 2)不论鼠标指针穿过被选元素或
-
Javascript jquery css 写的简单进度条控件
通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解. 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路.废话不多说. Javascript Progress Bar Demo - jb51.net #progress {backgroun
-
原生JS上传大文件显示进度条 php上传文件代码
JS原生上传大文件显示进度条,php上传文件,供大家参考,具体内容如下 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_limit = 20M <!DOCTYPE html> <html> <head> <title>原生JS大文件显示进度条</title> <meta charset="UTF-8"> <s
-
JavaScript实现带粒子效果的进度条
本文实例为大家分享了JavaScript实现带粒子效果进度条的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf8"/> <!-- <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1, ma
-
PHP中使用Session配合Javascript实现文件上传进度条功能
Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足
-
JavaScript实现简单动态进度条效果
本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 1.效果 2.源码 <html> <head> <script type="text/javascript"> window.onload = function () { var myProgress = document.getElementById("myProgress"); var mySpan = document.getElementByI