JSプログレスバーエフェクト実装コードorganization_javascriptスキル

最初の方法:
Loading.js

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

/ /周波数
varfrequency = 50;
//ステップサイズ
var step = 3;
//背景色
varloadingBgcolor = "#ffffff"; width
varloadWidth = 354;

/*
*パラメータの説明:
*content: コンテンツを表示します。空にすることもできます。
*imageURL: 参照先のパスを設定します。 JS ファイル ;
*left: プログレスバーの表示位置左
*top: プログレスバーの表示位置上
*/
関数 Loading(content, imageURL, left, top)
{
imageURL = imageURL "Loading.jpg";

LoadTable(content, imageURL, left, top);
showimage.style.display="";
window.setInterval() ;" , 周波数);
}

function RefAct()
{
imgAct.width = step;
if(imgAct.width >loadingWidth-4)
{
imgAct.width = 0;
}
}

関数 LoadTable(content, imageURL, left, top)
{
var strLoading = "" ;
strLoading = "

";
strLoading = "if(content != "")
{
strLoading = "";
strLoading = "";
strLoading = "";
strLoading = "";
strLoading = "";
strLoading = ""; ;

document.getElementById("loading_div").innerHTML = strLoading;
}


使用ページ:



コードをコピー

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

🎜>

2 番目のメソッド:
進行状況表示関数




コードをコピー


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

progress.js クラス ファイル:

$ = function (id) {
return document.getElementById(id)
}
// テキストを JSON 文字列に変換します。
String.prototype.toJson = function () {
if (this == ) {
return null;
}
else {
try {
return eval(( this.replace(/rn/g, rn) ));
}
catch (err) {
}
}
}; //文字の書式設定メソッド
String.prototype.format = function () {
var newStr = this;
var reg = null;
for (var i = 0; i reg = RegExp('{' (i) '}', 'gm');
newStr = newStr.replace(reg, argument[i])
}
return newStr;
//プログレスバークラス
function Progress(objId) {
//window.setInterval object
this.interval = null;
//プログレスバーオブジェクトID
this. = objId;
//現在の進行状況の開始進行状況は 0 です
this.progress = 0;
//進行状況バーには進行状況の DIV ID が表示されます
this.progressId = inner this .id;
//プログレスバーの境界線 ID
this.progressFrameId = フレーム this.id;
//プログレスバーのクラスパラメータ設定
this.config = {
//Width
width: 150 ,
//高さ
height: 20,
//左マージン
left: 0,
//上マージン
top: 0,
/ /進行状況の色
progressColor: red,
//境界線の色
borderColor: #ccc,
//境界線の幅
borderHeight: 2,
//一定時間経過後に進行状況を非表示にする進行状況が完了してから N 秒後、バー 0 はすぐに非表示になります
hiddenSplit:2000
}
}
//進行状況バー クラスの初期化メソッド
Progress.prototype.init = function () {
//新しい進行状況境界線 DIV
var progressdiv = document.createElement(div)
//境界線 DIV スタイル
var progressdiv_css_text = Position:absolute;width:{0}px;height: {1}px;left: {2}px;top:{3}px;border:{4} {5}px Solid;.format
(
this.config.width,
this. config.height,
this.config.left,
this.config.top,
this.config.borderColor,
this.config.borderHeight
); progress to 0
this.progress = 0;
//境界線 ID を設定します
progressdiv.id = this.progressFrameId;
//境界線のスタイルを設定します
progressdiv.style.cssText = progressdiv_css_text;
//プログレスバー HTML を設定します
progressdiv.innerHTML = '

'.format(this.progressId, this.config.height, this.config.progressColor); /本文に追加
document .body.appendChild(progressdiv);
};
//進行状況バーの隠し関数
Progress.prototype.hiddenProgress = function () {
document.body. RemoveChild(document.getElementById(this.prototype.complete));
window.clearInterval(this.interval)
}
//進行状況が終了するとトリガーされる関数
Progress.prototype.complete = function () {
window.clearInterval (this.interval);
this.interval = window.setTimeout(this.id .hiddenProgress();,this.config.hiddenSplit);
if (this.completeCallBack) {
this.completeCallBack( );
}
}
//各進行状況の実行後のコールバック関数
Progress.prototype.callback = function () {
var progressDiv = document. getElementById(this.progressId) ;
var progressFrameDiv = document.getElementById(this.progressFrameId);
progressDiv.innerHTML = (this.progress*100) %
progressFrameDiv.title = アップロードの進行状況: (this .progress*100) % ;
progressDiv.style.width = (this.progress*100) %;
if (this.progress >= 1) {
this.complete(); >progressDiv.innerHTML = ファイルのアップロードが成功しました!;
}
}
//進行状況バー実行関数。ユーザーは
Progress.prototype.run = function () {
alert(非同期進行要求を実装するには this.id .run メソッドを実装してください。また、ポストバックするときに this.id .callback メソッドをコールバックしてください。 );
window.clearInterval(this.interval);
}
//進行状況を開始します
Progress.prototype.start = function () {
this.init(); this.interval = window.setInterval(this.id .run(), 1000);
}


画像読み込みの進行状況がリアルタイムで表示されます

コードをコピーします

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

<スクリプト>
var l=0;
var imgs;
var sum=0;
var imgs=new Array();
関数 chk(){
l--;
document.getElementById("aa").innerText="" ((sum-l)*100/sum) "%"
if (l==0){
for (var i=0) ;idocument.body.innerHTML =""
}
}
if (document.images){
imgs[0]=新しい画像()
imgs[1]=新しい画像()
imgs[2]=新しい画像()
imgs[3]=新しい画像()
imgs[4]=新しい画像()
imgs[5]=新しい画像()
imgs[6]=新しい画像()
imgs[7]=new Image()
imgs[0].src="/articleimg/2006/08/3859/01.jpg";
imgs[1].src="/articleimg/2006/08/3859/02.jpg";
imgs[2].src="/articleimg/2006/08/3859/03.jpg";
imgs[3].src="/articleimg/2006/08/3859/04.jpg";
imgs[4].src="/articleimg/2006/08/3859/05.jpg";
imgs[5].src="/articleimg/2006/08/3859/06.jpg";
imgs[6].src="/articleimg/2006/08/3859/07.jpg";
imgs[7].src="/articleimg/2006/08/3859/08.jpg";
}

0%

sum=l=imgs.length;
for (var i=0;iimgs[i].onload=chk;
imgs[i].onerror=chk;//無论图片否加ダウンロード成功，都执行指定方法
}

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

1 か月前 By DDD

R.E.P.O.最高のグラフィック設定

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

1週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7403

15

Java チュートリアル

1630

14

CakePHP チュートリアル

1358

52

Laravel チュートリアル

1268

25

PHP チュートリアル

1218

29

もっと見る

Related knowledge

JavaScriptでページ読み込みプログレスバー機能を実装するにはどうすればよいですか? Oct 27, 2023 am 08:57 AM

JavaScript はページ読み込みの進行状況バー機能をどのように実装しますか?最新のインターネット アプリケーションでは、ページの読み込み速度がユーザー エクスペリエンスの重要な要素の 1 つです。ユーザーに読み込みプロセスを示すために、多くの Web サイトやアプリケーションは読み込み進行状況バーを使用しています。 JavaScript は、ページ読み込みの進行状況バー機能を実装する簡単かつ効果的な方法を提供します。具体的な実装プロセスは次のとおりです: HTML 構造の作成. まず、ページ上の適切な位置にプログレス バーの HTML 構造を作成します。

Vue を使用してプログレスバー効果を実装する方法 Sep 19, 2023 am 09:22 AM

Vue を使用してプログレス バー効果を実装する方法 プログレス バーは、タスクまたは操作の完了を表示するために使用できる一般的なインターフェイス要素です。 Vue フレームワークでは、単純なコードを通じてプログレス バーの特殊効果を実装できます。この記事では、Vue を使用してプログレス バー効果を実装する方法を紹介し、具体的なコード例を示します。 Vue コンポーネントの作成 まず、プログレスバー機能を実装するために Vue コンポーネントを作成する必要があります。 Vue では、コンポーネントは再利用可能であり、複数の場所で使用できます。 Pro という名前のファイルを作成します

HTML と CSS を使用して進行状況バーの色を設定するにはどうすればよいですか? Sep 19, 2023 pm 08:25 PM

Web サイト開発において、進行状況バーは Web サイトの重要な部分です。プログレスバーはプロセスの進行状況を示します。これを利用すると、ユーザーは、読み込み時間、ファイルのアップロード、ファイルのダウンロード、その他の同様のタスクを含む、Web サイト上で行われている作業のステータスを確認できます。デフォルトでは灰色です。ただし、進行状況バーを目立たせて視覚的に魅力的にするために、HTML と CSS を使用して色を変更できます。プログレスバーとは何ですか?進行状況バーは、タスクの進行状況を示すために使用されます。これはグラフィカル ユーザー インターフェイス要素です。これは基本的に、タスクの進行に応じて徐々に埋まっていく水平バーと、パーセンテージ値またはその他の完了インジケーターで構成されます。プログレスバーは、ファイルのアップロード、ファイルのダウンロード、ソフトウェアのインストールなどのプロセスの完了に関する情報をユーザーに提供するために Web アプリケーションで使用されます。

HTMLとCSSを使用してプログレスバーを作成する方法 Sep 05, 2023 am 09:09 AM

概要 プログレス バーは、Web アプリケーションの主要コンポーネントです。進捗は、プロジェクトまたはタスクの完了を示します。このモジュールでは、HTML を使用して進行状況バーを構築し、CSS でスタイルを設定します。プログレスバーの進捗アニメーションも提供します。このタスクでは、@keyframes を使用して進行状況バーをアニメーション化します。アニメーションの長さ、名前、タイミングなどのアニメーション スタイル プロパティを使用します。アルゴリズム ステップ 1 - テキスト エディターで HTML ボイラープレートを作成します。ステップ 2 - 親 div コンテナを作成し、クラス名を barContainer として定義します。ステップ 3 - 次に、現在の親 div の別の子を作成し、クラス名を定義します。ステップ 4 - 進行中の継承とアニメーション化される子を作成します。

Vue と Element-UI を使用してプログレス バーと読み込みアニメーション効果を実装する方法 Jul 21, 2023 pm 08:54 PM

Vue と Element-UI を使用してプログレス バーとアニメーション効果の読み込みを実装する方法 Vue.js は軽量のフロントエンド フレームワークであり、Element-UI は Vue.js に基づく UI コンポーネント ライブラリであり、豊富なコンポーネント セットを提供しますこの効果は、美しいフロントエンド インターフェイスを迅速に開発するのに役立ちます。この記事では、Vue と Element-UI を使用してプログレス バーと読み込みアニメーション効果を実装する方法を紹介します。 1. まずElement-UIをインストールして導入します。

Vueコンポーネント開発：プログレスバーコンポーネントの実装方法 Nov 24, 2023 am 08:56 AM

Vue コンポーネントの開発: プログレス バー コンポーネントの実装方法 はじめに: Web 開発では、プログレス バーは一般的な UI コンポーネントであり、データ要求、ファイルのアップロード、フォームの送信などのシナリオで操作の進行状況を表示するためによく使用されます。 Vue.jsではコンポーネントをカスタマイズすることで簡単にプログレスバーコンポーネントを実装することができますので、本記事ではその実装方法と具体的なコード例を紹介します。 Vue.js初心者の参考になれば幸いです。コンポーネントの構造とスタイル まず、プログレスバーコンポーネントの基本構造とスタイルを定義する必要があります。

PHP開発：記事閲覧プログレスバーと共有機能の実装方法 Sep 22, 2023 am 08:06 AM

PHP 開発: 記事閲覧プログレスバーと共有機能の実装方法 はじめに: 記事閲覧プログレスバーと共有機能は、ユーザーにより良い読書体験を提供し、コンテンツの共有を容易にする重要な機能です。 PHP 開発では、これら 2 つの機能を何らかの技術的手段によって実現できます。この記事では、具体的な実装方法と対応するコード例を紹介します。 1. 記事閲覧プログレスバーの実装 記事閲覧プログレスバーの実装のポイントは、現在のユーザーの読書進捗状況（つまり、現在スクロールしている文書の高さ）を取得し、それを全体に対する相対値に変換することです。記事。

Javascriptを使用してプログレスバーを作成する Sep 04, 2023 pm 10:53 PM

プログレス バーは、jQuery で構築された優れた UI ウィジェットと対話型ヘルパーのライブラリに追加された最新コンポーネントの 1 つです。これは、この記事の執筆時点ではライブラリの最新バージョン 1.7 で導入されました。現在、プログレスバーは決定論的なものにすぎません。つまり、プログレスバーを更新するときは、その値が何であるかを明示的に伝える必要があり、測定しているプロセスがいつ完了するかを事前に知る必要があります。このウィジェットは、現時点では、完了までに不確定な時間がかかるプロセスには最適な選択肢ではありません。これは、限られた数のプロパティとメソッドを公開する小さな API を備えた非常にシンプルなウィジェットですが、それでも非常に効果的であり、プロセスが完了するまでの残りのパーセンテージについて訪問者に視覚的なフィードバックを提供するのに最適です。始めるには jQue が必要です

See all articles

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved

;
strLoading = "" コンテンツ ""; "

";
strLoading = ""; 🎜> strLoading = "