快捷導(dǎo)航

原生javascript模仿win8等待提示圓圈進(jìn)度條

更新時(shí)間：2014年04月24日 16:09:25 作者：

一直很中意win8等待提示圓圈進(jìn)度條，下面本文就使用原生javascript模仿win8等待進(jìn)度條,需要的朋友可以參考下

一、序言

一直很中意win8等待提示圓圈進(jìn)度條。win8剛出來那會(huì)，感覺好神奇!苦于當(dāng)時(shí)沒思路，沒去研究。通過最近網(wǎng)上找找資料，終于給搞出來了！先上Demo,獻(xiàn)丑了！預(yù)覽請(qǐng)看：win8進(jìn)度條。
二、簡(jiǎn)單介紹

原生javascript編寫，需要理解js基于面向?qū)ο缶幊毯蛨A形坐標(biāo)計(jì)算！

實(shí)現(xiàn)原理：把每個(gè)圓點(diǎn)抽象成一個(gè)對(duì)象（ProgressBarWin8類型），將每個(gè)圓點(diǎn)對(duì)象存在數(shù)組中（progressArray），延遲執(zhí)行每個(gè)圓點(diǎn)對(duì)象的run方法，至于圓點(diǎn)運(yùn)行速度越來越快，是通過改變定時(shí)器延遲毫秒數(shù)實(shí)現(xiàn)的。

復(fù)制代碼代碼如下:

 
　// 判斷元素x與圓心x坐標(biāo)大小，設(shè)置定時(shí)器延遲時(shí)間 
if (this.position.left < this.fixed.left) { 
this.delay += .5; 
} else { 
this.delay -= .5; 
} 

還是上源碼吧！表達(dá)能力實(shí)在不怎么好（代碼中注釋更詳細(xì)，會(huì)看得更明白）。

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>仿win8等待進(jìn)度條</title> 
<style> 
body { 
margin: 0; 
padding: 0; 
background: green 
} 
</style> 
</head> 
<body> 
<script> 
//********準(zhǔn)備條件******** 
// 弧度角度轉(zhuǎn)換公式：弧度=Math.PI*角度/180; js中Math.sin(),Math.cos()等函數(shù)，是根據(jù)弧度計(jì)算 
// 圓x軸坐標(biāo)計(jì)算公式:Math.cos(Math.PI * 角度/ 180) * 半徑 + 圓心x軸坐標(biāo) 
// 圓y軸坐標(biāo)計(jì)算公式:Math.sin(Math.PI * 角度/ 180) * 半徑 + 圓心y軸坐標(biāo) 
//********準(zhǔn)備條件******** 


// 圓點(diǎn)元素類（js中沒有類的概念，這里模擬而已） 
function ProgressBarWin8() { 
// 圓心坐標(biāo) 
this.fixed = { 
left: 0, 
top: 0 
}; 
// html標(biāo)簽元素坐標(biāo) 
this.position = { 
left: 0, 
top: 0 
}; 
this.radius = 70; // 圓半徑 
this.angle = 270; // 角度,默認(rèn)270 
this.delay = 30; // 定時(shí)器延遲毫秒 
this.timer = null; // 定時(shí)器時(shí)間對(duì)象 
this.dom = null; // html標(biāo)簽元素 
// html標(biāo)簽元素樣式， position需設(shè)置成absolute 
this.style = { 
position: "absolute", 
width: "10px", 
height: "10px", 
background: "#fff", 
"border-radius": "5px" 
}; 
} 

// js中每個(gè)函數(shù)都有個(gè)prototype對(duì)象屬性，每個(gè)實(shí)例都可以訪問 
ProgressBarWin8.prototype = { 
// 運(yùn)行方法 
run: function() { 
if (this.timer) { 
clearTimeout(this.timer); 
} 

// 設(shè)置html標(biāo)簽元素坐標(biāo)，即計(jì)算圓上的點(diǎn)x,y軸坐標(biāo) 
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坐標(biāo)大小，設(shè)置定時(shí)器延遲時(shí)間 
if (this.position.left < this.fixed.left) { 
this.delay += .5; 
} else { 
this.delay -= .5; 
} 

var scope = this; 
// 定時(shí)器，循環(huán)調(diào)用run方法，有點(diǎn)遞歸的感覺 
this.timer = setTimeout(function () { 
// js中函數(shù)的調(diào)用this指向調(diào)用者，當(dāng)前this是window 
scope.run(); 
}, this.delay); 
}, 
// html標(biāo)簽元素初始設(shè)置 
defaultSetting: function () { 
// 創(chuàng)建一個(gè)span元素 
this.dom = document.createElement("span"); 
// 設(shè)置span元素的樣式，js中對(duì)象的遍歷是屬性 
for (var property in this.style) { 
// js中對(duì)象方法可以用.操作符，也可以通過鍵值對(duì)的方式 
this.dom.style[property] = this.style[property]; 
} 
// innerWidth innerHeight窗口中文檔顯示區(qū)域的寬度，不包括邊框和滾動(dòng)條,該屬性可讀可寫。 
// 設(shè)置圓心x,y軸坐標(biāo)，當(dāng)前可視區(qū)域的一般，即中心點(diǎn) 
this.fixed.left = window.innerWidth / 2; 
this.fixed.top = window.innerHeight / 2; 
// 設(shè)置span元素的初始坐標(biāo) 
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標(biāo)簽添加到documet里面 
document.body.appendChild(this.dom); 

// 返回當(dāng)前對(duì)象 
return this; 
} 
}; 

// 不明白的，把后面的代碼注釋掉，先測(cè)試一個(gè)圓點(diǎn)運(yùn)行情況 
//new ProgressBarWin8().defaultSetting().run(); 



var progressArray = [], // 用于存放每個(gè)圓點(diǎn)元素對(duì)象數(shù)組，js中數(shù)組大小可變，類似于list集合 
tempArray = [], // 用于存放progressArray拋出來的每個(gè)對(duì)象，窗口大小改變后，重置每個(gè)對(duì)象的圓心坐標(biāo) 
timer = 200; // 每隔多少毫秒執(zhí)行一個(gè)元素對(duì)象run方法的定時(shí)器 

// 創(chuàng)建圓點(diǎn)元素對(duì)象，存入數(shù)組中，這里創(chuàng)建5個(gè)對(duì)象 
for (var i = 0; i < 5; ++i) { 
progressArray.push(new ProgressBarWin8().defaultSetting()); 
} 

// 擴(kuò)展數(shù)組each方法，c#中的lambda大都是這樣實(shí)現(xiàn) 
Array.prototype.each = function (fn) { 
for (var i = 0, len = this.length; i < len;) { 
// 通過call(object,arg1,arg2,...)/apply(object,[arg1,arg2,...])方法改變函數(shù)fn內(nèi)this的作用域， 以此可用于繼承 
fn.call(this[i++], arguments);// 或者：fn.apply(this[i++],arguments) 
} 
}; 

// 窗口大小改變事件，重置每個(gè)元素對(duì)象的圓心坐標(biāo) 
window.onresize = function () { 
tempArray.each(function () { 
this.fixed.left = window.innerWidth / 2; 
this.fixed.top = window.innerHeight / 2; 
}); 
}; 

// 每個(gè)多少毫秒執(zhí)行數(shù)組集合的元素對(duì)象run方法 
timer = setInterval(function () { 
if (progressArray.length <= 0) { 
// 清除此定時(shí)器，不然會(huì)一直執(zhí)行（setTimeOut：延遲多少毫秒執(zhí)行，一次；setInterval：每隔多少毫秒執(zhí)行，多次） 
clearInterval(timer); 
} else { 
// shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。 
var entity = progressArray.shift(); 
tempArray.push(entity); 
// 執(zhí)行每個(gè)元素對(duì)象的run方法 
entity.run(); 
} 
},timer); 
</script> 
</body> 
</html> 