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 までご連絡ください。

前の記事：js_javascript スキルにおける String オブジェクトの replace の使用方法の詳細な説明次の記事：js_javascript スキルにおける String オブジェクトの replace の使用方法の詳細な説明

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

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

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

© php.cn All rights reserved

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

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