1。序文
私はいつも速いサークルの進行状況を待っているWin8がとても好きでした。 Win8が最初に登場したとき、それはとても素晴らしいと感じました！私はその時点では知りませんでしたが、勉強しませんでした。最近オンラインで情報を検索した後、私はついにそれを手に入れました！最初にデモに行き、醜い顔を披露しましょう！プレビューについては、Win8 Progress Barを参照してください。
2。簡単な紹介
ネイティブJavaScriptを書くと、JSはオブジェクト指向のプログラミングと円形座標計算に基づいていることを理解する必要があります。
実装の原則：各ドットはオブジェクト（ProgressBarwin8タイプ）に要約し、各ドットオブジェクトを配列（ProgressArray）に保存し、各ドットオブジェクトの実行方法の実行を遅らせます。より速く、より速いドットの実行に関しては、タイマーの遅延ミリ秒を変更することで達成されます。
コードコピーは次のとおりです。
//要素Xと中央Xの座標サイズを決定し、タイマーの遅延時間を設定します
if（this.position.left <this.fixed.left）{
this.delay += .5;
} それ以外 {
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> Imitation Win8 Progress Barを待っている</title>
<style>
体 {
マージン：0;
パディング：0;
背景：緑
}
</style>
</head>
<body>
<スクリプト>
// *********準備条件*********
// RADI角変換式：RADIUS = MATH.PI* ANGLE/180; jsのmath.sin（）、math.cos（）などの関数は、ラジアンに基づいて計算されます
//円のx軸座標の計算式：math.cos（math.pi * angle/180） * radius + center x軸座標のx軸座標
//円のy軸座標の計算式：math.sin（math.pi * angle/180） * radius + y軸座標の座標
// *********準備条件*********
//ドット要素クラス（JSにはクラスの概念はありません。ここでシミュレートされただけです）
function progressbarwin8（）{
//センター座標
this.fixed = {
左：0、
上：0
};
// HTMLタグ要素座標
this.position = {
左：0、
上：0
};
this.radius = 70; //円上半径
this.angle = 270; //角度、デフォルト270
this.delay = 30; //タイマー遅延ミリ秒
this.timer = null; //タイムタイムオブジェクト
this.dom = null; // HTMLタグ要素
// HTMLタグ要素スタイル、位置を絶対に設定する必要があります
this.style = {
ポジション：「絶対」、
幅：「10px」、
高さ：「10px」、
背景：「#fff」、
「Border-Radius」：「5px」
};
}
// JSの各関数にはプロトタイプオブジェクト属性があり、各インスタンスにアクセスできます
Progressbarwin8.prototype = {
//メソッドを実行します
実行：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;
} それ以外 {
this.delay - = .5;
}
var scope = this;
//タイマー、runメソッドを呼び出すためにループすると、少し再帰的に感じます
this.timer = setimeout（function（）{
// JSの関数の呼び出しは発信者を指します、そしてこれは現在ウィンドウです
scope.run（）;
}、this.delay）;
}、
// HTMLタグ要素の初期設定
デフォルトセット：function（）{
//スパン要素を作成します
this.dom = document.createelement（ "span"）;
//スパン要素のスタイルを設定すると、JSのオブジェクトのトラバーサルが属性です
for（this.styleのvarプロパティ）{
// JSのオブジェクトメソッドを使用できます。オペレーター、またはキー価値のペアを介して
this.dom.style [Property] = this.style [Property];
}
//内側の内側のハイスウィンドウのドキュメントディスプレイ領域の幅には、境界とスクロールバーが含まれていません。このプロパティは読みやすく書かれています。
//円の中心のxおよびy軸座標を設定すると、現在の視覚領域が一般的です。つまり、中心点です
this.fixed.left = window.innerwidth / 2;
this.fixed.top = window.innerheight / 2;
//スパン要素の初期座標を設定します
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";
// documetにスパンタグを追加します
document.body.appendChild（this.dom）;
//現在のオブジェクトを返します
これを返します。
}
};
//わからない場合は、次のコードにコメントして、最初にドットの操作をテストします
// new ProgressBarwin8（）。defaultSetting（）。run（）;
var ProgressArray = []、//は、各ドット要素オブジェクトアレイを保存するために使用されます。 JSの配列サイズは、リストコレクションと同様の変動的です
temparray = []、// ProgressArrayによってスローされた各オブジェクトを保存するために使用されます。ウィンドウサイズが変更されたら、各オブジェクトの中心座標をリセットします。
タイマー= 200; //要素オブジェクトを実行するタイマーは、ミリ秒ごとにメソッドを実行します
//ドット要素オブジェクトを作成し、配列に保存し、ここで5つのオブジェクトを作成します
for（var i = 0; i <5; ++ i）{
ProgressArray.push（new ProgressBarwin8（）。defaultSetting（））;
}
//配列を拡張する各メソッド、C＃のほとんどのラムダはこの方法で実装されます
array.prototype.each = function（fn）{
for（var i = 0、len = this.length; i <len;）{
//コール（object、arg1、arg2、...）/apply（object、[arg1、arg2、...]）メソッドを介して関数fnでこれの範囲を変更します。
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;
}）;
};
//配列コレクションの要素オブジェクト実行方法を実行するために使用されるミリ秒数
Timer = setInterval（function（）{
if（ProgressArray.length <= 0）{
//このタイマーをクリアします。それ以外の場合は常に実行されます（SetimeOut：1回の遅延実行の数ミリ秒、Setinterval：数ミリ秒の実行、複数回）
ClearInterval（タイマー）;
} それ以外 {
// Shift（）メソッドを使用して、Arrayの最初の要素を削除し、最初の要素の値を返します。
var entity = progressArray.shift（）;
temparray.push（entity）;
//各要素オブジェクトの実行方法を実行します
entity.run（）;
}
}、タイマー）;
</script>
</body>
</html>