進捗バーの詳細

詳細
実際のプロジェクトでは,HTML 5のmeterとprogressコントロールはいずれも進捗表示を実現できるが,progress互換性を総合的に考慮したほうがよいことが分かった.meterコントロールはIOS ipad/iphoneで正しく表示されていないようです.
 
①progressコントロールで制御
 

 
読者は、これが様々なブラウザ環境で基本的な作業であることをテストすることができます(IE 10+および他の信頼できるブラウザがサポートしています).
【注意】コントロールバーの幅は必ずvalueで設定し、width='100 px'で直接設定するのは役に立たない
meterコントロールで
 

 
読者はテストすることができて、これはアップルの環境の下で仕事をしません.
【注意】コントロールバーの幅は必ずvalueで設定し、width='100 px'で直接設定するのは役に立たない
 
一、progress要素の基本的な理解
 

   progress  

ブラウザがこのラベルをサポートしていない場合、ラベルの内容が表示されます.効果:
 
 
 
基本プロパティ
max,value,position,labels.
①maxは最大値を指します.デフォルトでは、進度値範囲は0.0~1.0、max=100とすると、進度値範囲は0~100となる.
②valueは値ですが、max=100、value=50ならちょうど半分です.valueプロパティが存在するかどうかはprogress進捗バーに確定性があるかどうかを決定します.
どういう意味ですか.例えばvalueがないと不確定なので、IE 10ブラウザの下の顔は無限ループの虚点アニメーションです.ただし、value属性が存在すると(値がなくても)、例えば、虚点アニメーション-->変条とみなされ、以下のようにスクリーンショットされる:(IE 10 valueを追加した後変条)
 
③positionは読み取り専用属性で、名前の通り、現在の進捗位置はvalue/maxの値です.プログレスバーが不確定である場合、値は-1である.
④labelsも読み取り専用属性であり、そのprogress要素を指すlabel要素たちが得られる.例えばdocument.querySelector("progress").Labels、HTML Collectionを返します.下は私のテストのスクリーンショットです(Operaブラウザから切り取って、現在FireFox 18.0.2およびIE 10はサポートされていないようです):
Operaブラウザでのテスト結果:
 
タグはIE 10+と互換性があるので、ここではIE互換性を解決する必要があります.
【良い互換性の方法】
IE 6~IE 9ブラウザでは、プログレスバー効果をシミュレートし、背景画像を使用しない場合は、一般的に少なくとも2層のラベルが必要です.ラベルを2層追加する必要がありますか?No, no, no! 外部のprogressタグはすでに私たちのために半分の仕事をしてくれました.progressに対応するCSSスタイルも、IE 6~9ブラウザに必要なもの(高さ幅、枠色背景色など)なので、もう1層のタグを追加するだけでいいので、このタグはすでに完成した進捗バーのスタイルに対応しています.
 

 
どのようなCSSコードが必要ですか?以下に,赤色の部分と互換性処理が増加したものは,いずれも無傷であり,hackパッチは不要である.
 

progress {
    display: inline-block;
    width: 160px;
    height: 20px;
    border: 1px solid #0064B4;  
    background-color:#e6e6e6;
    color: #0064B4; /*IE10*/
}
/*ie6-ie9*/
progress ie {
    display:block;
    height: 100%;
    background: #0064B4;
}

progress::-moz-progress-bar { background: #0064B4; }
progress::-webkit-progress-bar { background: #e6e6e6; }
progress::-webkit-progress-value  { background: #0064B4; }

もちろん、progressやカスタムie要素、ie 6~8は知らないので、動的パッチを打つ必要があります.以下のようにします.

if (typeof window.screenX !== "number") {
    document.createElement("progress");	
    document.createElement("ie");	
}

完全なコード:

    
    
    
    
    
        if (typeof window.screenX !== "number") {
            document.createElement("progress");
            document.createElement("ie");
        }
    

【注意】progressおよびカスタムie要素、ie 6~8は認識されていません.動的パッチを適用する必要があります.jsの位置はDOMノードの前にする必要があります.
 
二.互換性のあるストライプの進捗バーを考慮する必要はありません
原理:ネストDIV

可以在里div的内部或右边加个百分比显示。

这种条形进度条在任何浏览器下都可以显示，ie5都行！这种条形进度条常常与ligerUI等等结合应用。

想要动态？写JavaScript就行啦~

 

 

三.简单模拟下下载进度跑条

    
    
    
    
        function DownloadStart() {
            alert("    ")
            var Down = document.getElementById("Download");
            var i = 0;
            var DownSetTime;
            DownSetTime = setInterval(function () {
                i += 10
                Down.value = i;
                if (i == 100) {
                    clearInterval(DownSetTime);
                    alert("    ")
                }
            }, 500)
        } 
    

もちろん、本当の進度はそう書くことはできません.実際には進度を判断する方法がまだないので、ランナーをずっと走らせるか、頂上に走ってダウンロードが完了するのを待って、直接100%ジャンプするしかありません.
例1:進捗バーは90まで走って、それから待って、サーバーあるいはその他の場所から1つの値が入ってくるのを待って、それから再び100に着きます.

    
    
    
    
        function LoadStart() {
            var Complete = 0;//      ，   0，   1
            var Load = document.getElementById("Load");//     
            var i = 0;//        

            //      
            LoadSetTime = setInterval(function () {
                i += 10;// 500   10 
                Load.value = i;
                if (i >= 90) {//    90 ，    ，  
                    clearInterval(LoadSetTime);
                    return;
                }
            }, 500);

            //      
            GetData = setInterval(function () {
                if (Complete == 1) {//     ，    1   
                    Load.value = 100;//    ， 100
                    alert("    ");
                    clearInterval(GetData);//                   
                    clearInterval(LoadSetTime);//                   
                }
            });

            //                ，                 ，        ，      ，      ，             ，           
            $.post(URL, function (data) {
                if (parseInt(data) == 1) {
                    Complete = 1;
                }
            })
        }
    

例2:プログレスバーはずっと走って、それから待って、サーバーあるいはその他の地方から1つの値が入ってくるのを待って、それから再び100まで後ですべてのタイマーをクリアして、ロードは完成します

    
    
    
    
        function LoadStart() {
            var Complete = 0;//      ，   0，   1
            var Load = document.getElementById("Load");//     
            var i = 0;//        

            //      
            LoadSetTime = setInterval(function () {
                i += 10;// 500   10 
                Load.value = i;
                if (i == 100) {
                    i = 0;
                }
            }, 500);

            //      
            GetData = setInterval(function () {
                if (Complete == 1) {//     ，    1   
                    Load.value = 100;//    ， 100
                    clearInterval(GetData);//                   
                    clearInterval(LoadSetTime);//                   
                }
            });

            //                ，                 ，        ，      ，      ，             ，           
            $.post(URL, function (data) {
                if (parseInt(data) == 1) {
                    Complete = 1;
                }
            })
        }
    

 
 
 
四.拡張:円形ダイナミック進捗バー、これは後でまとめます
 
 
 
 
 
 
 
 
 
.