快捷導(dǎo)航

原生javascript模仿win8等待提示圓圈進度條

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

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

一、序言

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

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

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

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

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

還是上源碼吧！表達能力實在不怎么好（代碼中注釋更詳細，會看得更明白）。

復(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等待進度條</title> 
<style> 
body { 
margin: 0; 
padding: 0; 
background: green 
} 
</style> 
</head> 
<body> 
<script> 
//********準備條件******** 
// 弧度角度轉(zhuǎn)換公式：弧度=Math.PI*角度/180; js中Math.sin(),Math.cos()等函數(shù)，是根據(jù)弧度計算 
// 圓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需設(shè)置成absolute 
this.style = { 
position: "absolute", 
width: "10px", 
height: "10px", 
background: "#fff", 
"border-radius": "5px" 
}; 
} 

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

// 設(shè)置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坐標大小，設(shè)置定時器延遲時間 
if (this.position.left < this.fixed.left) { 
this.delay += .5; 
} else { 
this.delay -= .5; 
} 

var scope = this; 
// 定時器，循環(huán)調(diào)用run方法，有點遞歸的感覺 
this.timer = setTimeout(function () { 
// js中函數(shù)的調(diào)用this指向調(diào)用者，當前this是window 
scope.run(); 
}, this.delay); 
}, 
// html標簽元素初始設(shè)置 
defaultSetting: function () { 
// 創(chuàng)建一個span元素 
this.dom = document.createElement("span"); 
// 設(shè)置span元素的樣式，js中對象的遍歷是屬性 
for (var property in this.style) { 
// js中對象方法可以用.操作符，也可以通過鍵值對的方式 
this.dom.style[property] = this.style[property]; 
} 
// innerWidth innerHeight窗口中文檔顯示區(qū)域的寬度，不包括邊框和滾動條,該屬性可讀可寫。 
// 設(shè)置圓心x,y軸坐標，當前可視區(qū)域的一般，即中心點 
this.fixed.left = window.innerWidth / 2; 
this.fixed.top = window.innerHeight / 2; 
// 設(shè)置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 = [], // 用于存放每個圓點元素對象數(shù)組，js中數(shù)組大小可變，類似于list集合 
tempArray = [], // 用于存放progressArray拋出來的每個對象，窗口大小改變后，重置每個對象的圓心坐標 
timer = 200; // 每隔多少毫秒執(zhí)行一個元素對象run方法的定時器 

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

// 擴展數(shù)組each方法，c#中的lambda大都是這樣實現(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) 
} 
}; 

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

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