JS模擬metro UI的等待進度條，圓圈轉轉轉的等待通用性比較差吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>主頁面</title>
<style>
*
{
margin:0px;
padding :0px;
border:0px;
}
#CenterLine
{
width:100%;
height:5px;
background-color:Blue;
margin-top:20%;
}
.runLineBox
{
width:8px;
height:8px;
background-color:Blue;
float:left;
margin:5px;
position:absolute;
}
.point
{
width:1px;
height:1px;
background-color:Black;
position:absolute;
}
</style>
<script type="text/javascript">
Array.prototype.remove = function (x) {
if (isNaN(x) || x > this.length) { return false; }
for (var i = 0, n = 0; i < this.length; i++) {
if (this[i] != this[x]) {
this[n++] = this[i]
}
}
this.length -= 1
}
var MAX = 0
window.onload = function () {
var runline = null;
var RunLineBox = document.getElementsByTagName("div");
var length = RunLineBox.length;
var ArrayRunLineBox = new Array;
for (var i = 0; i < length; i++) {
ArrayRunLineBox[i] = RunLineBox[i]
}
for (var i = 0; i < length; ++i) {
if (ArrayRunLineBox[i].className != "runLineBox") {
ArrayRunLineBox.remove(i);
--length;
--i;
}
}
var RunLine = function (obj, marginLeft) {
var FPS =500; //動畫的幀數
var oldMarginLeft = parseInt(obj.style.marginLeft);
var line = function (X, AllWidth) {//動畫的v-t公式
var E = AllWidth / (1.408823456862077 * FPS); //此微積分的常量，隨其他變量變化而變化
var h1 = 236;
var h2 = 382;
var h3 = 236;
var h4 = 146;
var x = X / FPS;
if (x < 0.236) {
y = E * (Math.cos(Math.PI * x * 500 / h1 + Math.PI / 2) + 1);
}
else if (x < 0.618) {
y = 2 * E * (Math.cos(Math.PI * (x - h1/1000) * 1000 / h2 + Math.PI) + 1);
}
else if (x < 0.854) {
y = 2 * E * (Math.cos(Math.PI * (x - (h1 + h2) / 1000) * 1000 / h3) + 1);
}
else {
y = E * (Math.cos(Math.PI * (x -
(h1 + h2 +h3) / 1000 ) * 500 / h4 + Math.PI) + 1);
}
var Y = 500 - (y * 100);
// document.getElementById("pic").innerHTML += "<div class='point' style='top:" + Y + "px;left:" + X + "px'></div>"
return y;
};
var Left = 0;
(function () {
var AllWidth = document.body.clientWidth; //默認長度為浏覽器窗口寬度
var ALLWIdth_1 = AllWidth * 0.62;
var ALLWIdth_2 = (AllWidth - ALLWIdth_1) / 2;
Left += line(marginLeft, AllWidth);
++marginLeft;
if (marginLeft >= FPS) {
marginLeft = 0;
obj.style.marginLeft = "0px";
Left = 0;
//return 0;
}
if ((Left + oldMarginLeft) > AllWidth) {
obj.style.display = "none";
}
else {
obj.style.display = "";
}
obj.style.marginLeft = (Left + oldMarginLeft) + "px";
if ((Left + oldMarginLeft) > MAX) {
MAX = Left + oldMarginLeft;
}
//document.getElementById("contore").innerHTML = MAX;
runline = setTimeout(arguments.callee, 10);
})()
};
setTimeout(function () { RunLine(ArrayRunLineBox[3], 0) }, 0);
setTimeout(function () { RunLine(ArrayRunLineBox[2], 0) }, 500);
setTimeout(function () { RunLine(ArrayRunLineBox[1], 0) }, 1000);
setTimeout(function () { RunLine(ArrayRunLineBox[0], 0) }, 1500);
};
</script>
</head>
<body>
<div id="pic">
<div class="point" style="top:10px;left:10px;"></div>
</div>
<p id="CenterLine">
</p>
<div>
<div class="runLineBox" style="margin-left: 5px">
</div>
<div class="runLineBox" style="margin-left: 20px">
</div>
<div class="runLineBox" style="margin-left: 35px">
</div>
<div class="runLineBox" style="margin-left: 50px">
</div>
</div>
<br />
<br />
<div id="contore">
</div>
</body>
</html>