ホームページ > 記事 > ウェブフロントエンド > CSS3とJavaScriptでプログレスバーの効果を実現

CSS3とJavaScriptでプログレスバーの効果を実現

不言オリジナル: 2018-06-20 14:19:301574ブラウズ

この記事では主に、ユーザーに待機プロセスを与えることができるプログレスバー効果を実現するための Javascript + CSS3 について紹介します。必要に応じて詳細をご覧ください。

プログレスバーは多くの Web で使用できます。この記事では、プログレスバーの効果を紹介します。具体的なコードは次のとおりです。

実装する前に、CSS2 属性クリップで Web ページのプログレスバーを実装します。まず、clip 属性を紹介します。この属性は CSS2.1 ではほとんど使用されないため、理解する必要があります。

ブラウザのサポート: すべての主流のブラウザは、clip 属性をサポートしています。

Clip 属性は、w3c 公式 Web サイトで次のように説明されています。デフォルトでは、要素の表示領域は要素のトリミングによって制御されます。

Clip クリッピングの構文は次のとおりです:

 .xx {clip:rect(<top>, <right>, <bottom>, <left>)}

Rect 属性には、top、right、bottom、left の 4 つの値が必要であり、カンマで区切る必要があります。 CSS のマージンとパディングの書き込み順序と同じ、時計回りの回転ルールに従います。

CSS2.1では、rect()の9f43ca36df22477a981e12c69d554f07、1f936ab57d903ce4e3709e40fbd37274で指定されたオフセットは要素のボックスの上端から計算され、2b67cd4e7cd7d40ec2240b97d7dbf47c、ed64239f284976ac56e20ff01b31b189で指定されました。要素のボックスの左端から計算されます。次のように:

簡単なデモをもう一度見てみましょう。

次の CSS

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }

上の例は、50X55px の長方形ボックス内で線を切り取っており、点線の長方形が生成されます:

以下に示すように:

進行中のコードのデモを見ることができます。上記の HTML3 p を説明すると、1 つは要素コンテナー (プログレスボックス) です。これは基本的に境界線を強調表示し、容量が 100% になるまでの時間をユーザーに知らせることを目的としています。2 番目のプログレスバーは背景色を意味します。変更中の要素のが赤に設定されています

3 番目は、進行状況の表示を示す数値テキストです。

プログレスバーの効果を示すには、JS で単純な setInterval コードが必要です。setInterval コードは次のとおりです。クリップを使用します。クロッピングデモを実現します

2: 進行状況イベント (progress) を使用してサーバーと対話し、Web ページの進行状況バーを実装します。

進行状況イベント (progress): クライアントとサーバーの通信に関連するイベントを定義します。進行中のイベント。

loadstart: 対応するデータの最初のバイトが受信されたときにトリガーされます。

progress: 応答を受信している間、継続的にトリガーされます。

error: リクエストでエラーが発生したときにトリガーされます。

abort: abort() メソッドの呼び出しによりリンクが終了するとトリガーされます。

load: 完全な対応するデータが受信されたときにトリガーされます。

loadend: 通信が完了するか、エラー、中止、またはロードイベントがトリガーされた後にトリガーされます。

各リクエストは、Loadstart イベントのトリガーによって開始され、その後に 1 つ以上の進行イベントが続き、次にエラー、中止、またはロードイベントのいずれか 1 つがトリガーされ、最後に loadend イベントがトリガーされて終了するわけではありません。

最初の 5 つのイベントをサポートするブラウザは、Firefox 3.5 以降、Safari 4 以降、Chrome、iOS の Safari、Android の WebKit です。

このイベントは、ブラウザーが新しいデータを受信するときに定期的にトリガーされます。 onprogress イベントハンドラーは、ターゲット属性が XHR オブジェクトであるイベントオブジェクトを受け取りますが、そこには 3 つの追加属性 (lengthComputable、position、totalSize) が含まれています。このうち、lengthComputable は進捗情報が利用可能かどうかを示すブール値、position は受信したバイト数、totalSize は対応する Content-Length ヘッダーに基づいて決定される予想バイト数を示します。この情報を使用して、ユーザー向けの進行状況インジケーターを作成できます。以下のスクリーンショットには、上で紹介した 3 つのパラメーターが含まれています。

<h2>使用clip实现裁剪demo</h2>
<p id="progress-box" class="progress-box">
  <p id="progress-bar" class="progress-bar"></p>
  <p id="progress-text" class="progress-text">0%</p>
</p>

サーバーと対話するコードは次のとおりです。気軽にシミュレーションするためのコード 1つ書くだけですもちろん実際に使うとこうはなりません！ 1 つのコンテンツを出力するだけです。

.progress-box{position:absolute;left:0;width:300px;height:60px;border:1px solid #000;margin-left:20px;}
.progress-bar{position:absolute;left:0;top:0;width:300px;height:60px;clip:rect(0px,0px,60px,0px);background:red;}
.progress-text{position:absolute;left:0;top:0;width:300px;height:60px;color:Black;text-align:center; line-height:60px; font-family:Georgia;font-size:2em;font-weight:bold;}

HTML コードは次のとおりです。

var bar = document.getElementById("progress-bar"),
   text = document.getElementById("progress-text");
var cent = 0,
   max = 300;
var timer = setInterval(progressFn, 30);
function progressFn() {
  if(cent > max) {
    cent = 0;
    timer = setInterval(arguments.callee(), 30);
  }else {
    bar.style.clip = "rect(0px," + cent + "px,60px,0px)";
    text.innerHTML = Math.ceil((cent / max) * 100) + "%";
    cent++;
  }
}

CSS コードは次のとおりです。

<h2>使用clip实现裁剪demo</h2>
<p id="progress-box" class="progress-box">
  <p id="progress-bar" class="progress-bar"></p>
  <p id="progress-text" class="progress-text">0%</p>
</p>

効果は次のとおりです:

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。！

CSS3とJavaScriptでプログレスバーの効果を実現

関連記事