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

進捗バー効果を実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript プログレスバーのいくつかのメソッド
  • js でプログレスバーを実装する方法
  • ウェブページの読み込み進捗バーコードを実現するJavaScriptは超シンプルです
  • js プログレスバー実装コード
  • JS プログレスバー効果実装コードの構成
  • JS は円形のプログレスバー(0~100%)の効果を実現します
  • Javascript jquery css で書かれたシンプルなプログレスバーコントロール
  • CSS+JS で実装されたプログレスバー効果
  • js はオーディオ制御プログレスバー機能を実現します
  • PHP で JavaScript とセッションを使用してファイルアップロードの進行状況バー機能を実装する

<<:  初心者向けの MySQL のインストール方法 (効果が実証済み)

>>:  MySQLデータベースがNULLを可能な限り避ける理由

推薦する

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

JavaScript でローカル変数をグローバル変数に変換する方法

まず関数の自己呼び出しを知る必要がある関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - ...

JS関数のカリー化の詳細な説明

目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...

MySQL の count 関数の正しい使い方の詳細な説明

1. 説明MySQLでは、テーブル内の行の総数を取得する必要がある場合、通常は次の文を使用します。 ...

React.cloneElement の使い方の詳しい説明

目次cloneElementの役割使用シナリオ新しい小道具を追加するプロップを変更するイベントカスタ...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

Vue3とVue2の利点のまとめ

目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...

MySQLデータベースはMMM高可用性クラスタアーキテクチャを実装します

コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...

MySQLのレプリケーションの詳細な分析

1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...

MacにMySQLをインストールするときに忘れたパスワードを変更する方法

1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...

MySQL の datetime フィールドの丸め操作

目次序文1. 背景2. シミュレーションテスト3. 結論要約する序文もし私が罠に陥っていなかったら、...

USE DB 輻輳に対する MySQL ソリューションの詳細な説明

障害に遭遇すると、障害の根本的な原因を考えるのではなく、障害を解決する方法を考えることがよくあります...

Linux userdel コマンドの使用法

1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...

ウェブサイトのデザインを改善するための役立つ提案を提供します

<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...

HTML と CSS に関する基本的なメモ (フロントエンドでは必読)

HTMLに触れた当初はレイアウトにいつもテーブルを使っていましたが、とても面倒で見た目も悪かったの...