進捗バー効果を実現するJavaScript

この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

今回のエフェクト画像は以下の通り。

この例を実行するのは難しくありません。練習したとき、新しい知識のポイントはwindow.getComputedStyle()関数を使用して要素の幅の値を取得することでした。

一般的な考え方としては、最初にdivボックスに幅0のdivボックスを配置し、ボタンのonclickコールバック関数でタイマーを使用して幅の値を変更することです。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        ＃容器 {
            幅: 500ピクセル;
            高さ: 200px;
            マージン: 50px 自動;
            位置: 相対的;
        }

        ＃箱 {
            幅: 260ピクセル;
            高さ: 30px;
            境界線: 1px ピンクの実線;
            境界線の半径: 16px;
            下マージン: 20px;
            パディング: 1px;
            オーバーフロー: 非表示;
        }

        #続き
            幅: 0;
            高さ: 100%;
            背景色: ピンク;
            境界線の半径: 16px;
        }

        #ボタン{
            位置: 絶対;
            左マージン: 110px;
            幅: 50px;
            高さ: 30px;
        }


        ＃文章 {
            表示: ブロック;
            位置: 相対的;
            左: 120px;
            下マージン: 20px;
        }

    </スタイル>
</head>

<本文>
    <div id="コンテナ">
        <div id="box" データコンテンツ前="22">
            <div id="続き"></div>
        </div>
        <div id="text">0%</div>
        <button id="btn">送信</button>
    </div>
    <スクリプト>
        box = document.getElementById("box"); とします。
        btn = document.getElementById("btn"); とします。
        cont = document.getElementById("cont"); となります。
        text = document.getElementById("text"); とします。

        関数 getstyle(obj, name) {
            if (window.getComputedStyle) {
                window.getComputedStyle(obj, null)[name]を返します。
            }
            それ以外 {
                obj.currentStyle[name]を返します。
            }
        }

        btn.onclick = 関数（）{
            ini = 0 とします。
            num = setInterval(() => { とします。

                tem = parseInt(window.getComputedStyle(cont, null)["width"]); とします。
                今 = tem + 26 とします。

                （tem >= 260）の場合{
                    console.log(現在);
                    クリア間隔(数値);
                    戻る;
                }
                
                cont.style.width = now + "px";
                ini = ini + 10;
                text.innerText = ini + "%";

            }, 80);
        }
    </スクリプト>

</本文>

</html>

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

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