ホームページ > 記事 > ウェブフロントエンド > プログレスバーを制御するJavaScriptの分析例

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

黄舟オリジナル: 2017-11-21 11:36:521475ブラウズ

以前は、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の分析例

この記事の詳細な学習を通じて、JavaScript コントロールのプログレスバーについての理解が深まると思います。あなたの仕事に役立つことを願っています。関連する推奨事項:

JavaScriptプログレスバーコントロールの実装例

プログレスバーのJavaScript実装のいくつかの方法の紹介

JavaScriptの実装progress バーのネイティブコード

以上がプログレスバーを制御するJavaScriptの分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：直接使用できる 5 つの JS 実用的な関数コードスニペット次の記事：直接使用できる 5 つの JS 実用的な関数コードスニペット

続きを見る