プログレスバーを制御するJavaScriptの分析例-jsチュートリアル-php.cn

プログレスバーを制御するJavaScriptの分析例

黄舟

リリース： 2017-11-21 11:36:52

オリジナル

1474 人が閲覧しました

以前は、JavaScriptでプログレスバーを実装し、プログレスバーをネイティブに実装する方法を紹介しました。では、プログレスバーを制御するにはどうすればよいでしょうか? JS がプログレスバーを制御するために使用する要素は比較的単純で、p タグ内に spam タグを埋め込むだけです。p の外側のレイヤーは背景として使用され、span の内側のレイヤーは制御される動的進行状況の表示に使用されます。 JSによる。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JS控制进度条</title>
    <style type="text/css">
        body
        {
            height:30px;
            width:330px;
            background-color:blue;
        }
        
        #ProgressBarBackgroundOne
        {
            background:url(ProgressBk.png) no-repeat 0 center;
            height:10px;
            width:300px;
        }
        #ProgressBarOne
        {
            background:url(ProgressFt.png) no-repeat 0 center;
            height:10px;
            width:0%;
            display:block;
        }
        
        #ProgressBarBackgroundTwo
        {
            background-color:White;
            height:10px;
            width:300px;
        }
        #ProgressBarTwo
        {
            background-color:Gray;
            height:10px;
            width:0%;
            display:block;
        }
        
    </style>
    <script type="text/javascript">
        var numOne = 0;
        var numTwo = 0;
        function SetProgressOne() {
            var ProgressOne = document.getElementById(&#39;ProgressBarOne&#39;);
            if (numOne < 100) {
                numOne = numOne + 1; 
             }
             ProgressOne.setAttribute(&#39;style&#39;, &#39;width:&#39; + numOne + &#39;%&#39;);
            setTimeout(SetProgressOne, 500);
        }

        function SetProgressTwo() {
            var ProgressTwo = document.getElementById(&#39;ProgressBarTwo&#39;);
            if (numTwo < 100) {
                numTwo = numTwo + 1;
            }
            ProgressTwo.setAttribute(&#39;style&#39;, &#39;width:&#39; + numTwo + &#39;%&#39;);
            setTimeout(SetProgressTwo, 500);
        }
        
    </script>
</head>
<body>
<p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p>
<p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p>
</body>
<script type="text/javascript">
    SetProgressOne();
    SetProgressTwo();
</script>
</html>

ログイン後にコピー

表示の便宜上、htmlドキュメントに直接cssテキストとjsスクリプトを記述しました。これはプログレスバーを制御するためのネイティブjs方法です。 Node.js または mootools のような js ライブラリを使用して作成することもできます。

SetProgressOne() は進行状況を表示するために画像を使用しますが、SetProgressTwo() は進行状況を表示するために色を使用します。原理はすべて同じで、いずれも JS を通じて Span タグの属性を制御します。 style="width: デフォルト値 %" で十分です。。パフォーマンスの点では、色を使用するよりも画像を使用する方が優れています。これは、すべてのブラウザーが CSS の角丸属性をサポートしているわけではないためです。以下は効果の比較です。

概要:

プログレスバーを制御するJavaScriptの分析例