読み込み進捗バーのネイティブ JS 実装

この記事では、ネイティブ JS によって実装された動的読み込みプログレスバーの特殊効果を紹介します。効果は次のとおりです。

実装されたコードは次のとおりです。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>読み込み進捗バーのネイティブ JS 実装</title>
    <スタイル>
        #進捗ボックス{
            幅: 300ピクセル;
            高さ: 40px;
            境界線: 1px 実線 #C8C8C8;
            背景: 白;
            位置: 相対的;
            マージン: 0 自動;
            上マージン: 100px;
        }
 
        #プログレスバー{
            位置: 絶対;
            左: 0;
            上: 0;
            zインデックス: 2;
            高さ: 40px;
            幅: 100%;
            行の高さ: 40px;
            色: 白;
            テキスト配置: 中央;
            フォントサイズ: 20px;
            フォントの太さ: 太字;
            フォントファミリー: Georgia;
            クリップ: rect(0px, 0, 40px, 0px);
            背景: #00A1F5;
        }
 
        #進捗テキスト{
            位置: 絶対;
            左: 0;
            上: 0;
            zインデックス: 1;
            幅: 100%;
            高さ: 40px;
            行の高さ: 40px;
            色: 黒;
            テキスト配置: 中央;
            フォントサイズ: 20px;
            フォントの太さ: 太字;
            フォントファミリー: Georgia;
        }
    </スタイル>
    <スクリプト>
        window.onload = 関数（）{
            // 現在の開始状態の値を設定します。
            // 実際の状況では、HTML5 の onprogress と onload を使用してこれを完了します // バックグラウンドと連携して、ajax を介してリアルタイムでデータを返すこともできます var iNow = 0;
            // タイマーを設定する var timer = setInterval(function () {
                // 現在の値が100の場合
                (iNow == 100)の場合{
                    // タイマーをクリアします clearInterval(timer);
                }それ以外 {
                    // 現在の状態値に1を加算する
                    iNow += 1;
                    // 実行ステータス関数を呼び出してステータス値を渡します progressFn(iNow);
                }
 
            }, 30);
 
 
            関数progressFn(cent) {
                // 最も外側のdivを取得する
                var oDiv1 = document.getElementById('progressBox');
                // 内部プログレスバーのdivを取得する
                var oDiv2 = document.getElementById('progressBar');
                // 内部テキストが変更されたときにdivを取得します
                var oDiv3 = document.getElementById('progressText');
 
                // プログレスバーの合計幅を取得します。var allWidth = parseInt(getStyle(oDiv1, 'width'));
 
                // 2 つの内部 div のテキスト コンテンツを同じに設定します oDiv2.innerHTML = cent + '%';
                oDiv3.innerHTML = セント + '%';
 
                // クリップの幅を変更します oDiv2.style.clip = 'rect(0px, ' + cent / 100 * allWidth + 'px, 40px, 0px)';
 
                // 現在の要素の属性値を取得する function getStyle(obj, attr) {
                    // IE 互換
                    （obj.currentStyle）の場合{
                        obj.currentStyle[attr]を返します。
                    }それ以外 {
                        // 2 番目のパラメータは false です。これは一般的な記述方法です。これは古いバージョンとの互換性のためです。 return getComputedStyle(obj, false)[attr];
                    }
                }
            }
        };
    </スクリプト>
</head>
 
<本文>
    <div id="プログレスボックス">
        <div id="progressBar">0%</div>
        <!-- 進捗がテキストを超えたときにテキストの色を変更するように 2 番目のレイヤーを設定します -->
        <div id="progressText">0%</div>
    </div>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: