ネイティブ JavaScript は Win8 を模倣してプロンプト サークルの進行状況を待機しています bar_javascript スキル

1. はじめに

私は、Win8 の待機中のプロンプトサークルプログレスバーがいつもとても気に入っています。 win8 が最初に登場したとき、私はそのときはまったくわからず、何も調べませんでした。最近インターネットで情報を調べていたら、やっと分かりました！まずはデモに行って見せてみましょう！プレビューについては、win8 のプログレス バーを参照してください。
2. 簡単な紹介

ネイティブ JavaScript を作成するには、js がオブジェクト指向プログラミングと円座標計算に基づいていることを理解する必要があります。

実装原理: 各ドットをオブジェクト (ProgressBarWin8 型) に抽象化し、各ドット オブジェクトを配列 (progressArray) に格納し、ドットと同様に各ドット オブジェクトの run メソッドの実行を遅らせます。タイマー遅延ミリ秒を変更することで実現されます。

コードをコピー コードは次のとおりです:

// 要素 x のサイズを決定します。
if (this.position.left
} else {
this) と中心の x 座標を指定し、タイマー遅延時間を設定します。 .lay -= .5;
}

ソースコードを取得しましょう。表現力は実際にはあまり良くありません（コード内のコメントを詳しくするとわかりやすくなります）。

コードをコピー コードは次のとおりです:

<メタhttp-equiv="Content-Type" content="text/html; charset=utf-8"/>

>body {
マージン: 0;
パディング: 0;
背景: 緑
}

<script> <BR>//********準備条件********** <BR>// ラジアンと角度の変換式: radians = Math.PI*angle /180 ; Math.sin()、Math.cos() および js 内の他の関数はラジアンに基づいて計算されます <BR>// 円の x 軸座標の計算式: Math.cos(Math.PI * angle / 180) *半径円の中心 x 軸座標<BR>//円の y 軸座標の計算式: Math.sin(Math.PI * Angle/180) * 半径円の中心 y 軸座標<BR>//**** ****準備条件**** **** <BR><BR><BR>// ドット要素クラス (js にはクラスの概念はありません。ここではシミュレートされているだけです) <br>function ProgressBarWin8( ) { <br>// 円の中心座標<BR>this .fixed = { <BR>left: 0, <BR>top: 0 <BR>}; HTML タグ要素の座標 <BR>this。 Position = { <BR>left: 0, <BR>top : 0 <BR>}; <BR>this.radius = 70; // 角度、デフォルト 270; 🎜>this.lay = 30; // ミリ秒単位のタイマー遅延 <BR>this.timer = null; // HTML タグ要素 <BR> // HTML タグ要素スタイル、位置は絶対に設定する必要があります <BR>this.style = { <BR>position: "absolute", <BR>width: "10px", <BR>height: "10px", <BR>background: " #fff", <BR>"border-radius": "5px " <BR>}; <BR>} <BR><BR>// js の各関数にはプロトタイプ オブジェクト属性があり、各インスタンスからアクセスできます。 <BR>ProgressBarWin8.prototype = { <BR>// メソッドの実行 <BR>run: function() { <BR>if (this.timer) { <BR>clearTimeout(this.timer) <br>} <🎜; ><br>// HTML タグ要素の座標を設定します。つまり、円上の点の x、y 軸座標を計算します。 <BR>this.position.left = Math.cos(Math.PI * this.角度 / 180) * this.radius this.fixed.left; <BR>this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius this.fixed.top; this.dom.style.left = this.position.left "px"; <BR>this.dom.style.top = this.position.top "px" <BR><BR>// 角度を変更します <BR>this.angle; <br><br>// 要素 x の x 座標と円の中心のサイズを決定し、タイマー遅延時間を設定します <BR>if (this.position.left < this.fixed .left) { <BR>this.delay = .5; <BR>} else { <BR>this.delay -= <br>} <br><BR>var スコープ = this; / タイマー、run メソッドを周期的に呼び出す、少し再帰的 <br>this.timer = setTimeout(function () { <br>// js で関数を呼び出すとき、これは呼び出し元を指します。現在、これは window <BR> scope.run(); <BR>}, this.lay); <BR>}, <BR>// HTML タグ要素の初期設定 <BR>defaultSetting: function () { <br>// スパン要素を作成します🎜>this.dom = document.createElement("span"); <br>// js のオブジェクトの走査は属性 <BR> (this.style の var プロパティ) { <BR>// js のオブジェクト メソッドは . 演算子またはキーと値のペアを使用できます <BR>this.dom.style[property] = this.style[property]; <BR>} <BR>// innerWidth innerHeightウィンドウ内のドキュメント表示領域の幅 (境界線とスクロール バーを除く) このプロパティは読み取りおよび書き込み可能です。<BR>//円の中心、現在の視覚領域、つまり中心点の x、y 軸座標を設定します。 <BR>this.fixed.left = window.innerWidth / 2 <BR>this; .fixed.top = window.innerHeight / 2; <BR>//スパン要素の初期座標を設定します <BR>this.position.left = Math.cos(Math.PI * this.angle / 180) * this. radius this.fixed.left; <BR> this.position.top = Math.sin(Math.PI * this.angle / 180) * this.radius this.fixed.top; <BR>this.dom.style.left; = this.position.left "px"; <BR>this.dom.style.top = this.position.top "px"; <BR>// ドキュメントにspanタグを追加します <BR>document.body.appendChild (this.dom); <br><br>// 現在のオブジェクトを返します <BR>return this; <BR><BR>};次のコードを実行して、最初にドットの動作をテストします<br>//new ProgressBarWin8().defaultSetting().run(); <br><BR><br><br>var progressArray = [], // 使用されます各ドット要素のオブジェクト配列を格納するには、js の配列。リストと同様の可変サイズです。 collection<br>tempArray = [], // ウィンドウ サイズが変更された後、各オブジェクトの中心座標をリセットします。 <br>timer = 200; // 要素オブジェクトの run メソッドを数ミリ秒ごとに実行するタイマー <BR><BR>// ドット要素オブジェクトを作成し、配列に格納します。 <br>for (var i = 0; i &lt ; 5; i) { <br>progressArray.push(new ProgressBarWin8().defaultSetting()); <BR>} <BR><BR>// 各メソッドの拡張配列、 C# のほとんどのラムダは次のように実装されます<br>Array.prototype.each = function (fn) { <br>for (var i = 0, len = this.length; i < len;) { <BR>// call(object,arg1,arg2,. ..)/apply(object,[arg1,arg2,...]) メソッドにより、関数 fn 内の this のスコープが変更され、<BR>fn.call を継承するために使用できます。 (this[i], argument);// または: fn.apply(this[i ],arguments) <BR>} <BR>} // ウィンドウ サイズ変更イベント、中心座標をリセットします。各要素のオブジェクト <BR>window.onresize = function () { <BR>tempArray.each(function () { <br>this.fixed.left = window.innerWidth / 2; <br>this.fixed.top = window.innerHeight / 2; <BR>} ); <BR>}; <BR><BR>//配列コレクションの要素オブジェクトの run メソッドを実行する時間 <BR>timer = setInterval( ) { <BR>if (progressArray.length <= 0 ) { <br>// このタイマーをクリアします。そうでない場合は永久に実行されます (setTimeOut: 1 回の実行を何ミリ秒遅らせるか; setInterval: 実行するミリ秒数) 、複数回) <br>clearInterval(timer); <BR>} else { <BR>// 配列の最初の要素を削除し、最初の要素の値を返すために、shift() メソッドが使用されます。 <BR>varentity = progressArray.shift(); <BR>tempArray.push(entity); <BR>//各要素オブジェクトの run メソッドを実行します <BR>entity.run(); >},タイマー); <BR></body> <BR><BR></script>