進捗バー効果を実現する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を可能な限り避ける理由

推薦する

MySQL ストアド プロシージャで case ステートメントを使用する詳細な例

この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...

JavaScript で虫眼鏡の特殊効果を実現

達成される効果:マウスを小さな画像の上に置くと、小さなブロックが小さな画像の上に表示され、この小さな...

MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)

最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...

Dockerコンテナのいくつかの保存方法の詳細な説明

目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...

Mysqlはマスタースレーブ構成とマルチマスターマルチスレーブ構成を実装します

現在シミュレーションしているのは、マスター スレーブ システム (ホスト 1 台とスレーブ 1 台)...

要素シャトルフレームのパフォーマンス最適化の実装

目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...

Vue.jsは9グリッド画像表示モジュールを実装します

Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...

Vueはズームイン、ズームアウト、ドラッグ機能を実装しています

この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するためのVueの具体的なコー...

Node.jsはSTMPプロトコルとEWSプロトコルに基づいてメールを送信します

目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...

JavaScript の isPrototypeOf 関数

目次1. isPrototypeOf()例 1、オブジェクト クラス インスタンス:例 2: Hum...

Bootstrap 3.0 学習ノート CSS関連補足

この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....

MySQL での order by の使用に関する詳細

目次1. はじめに2. 本文2.1 単一列のソート2.2 複数の列を並べ替える2.3 ソート方法2....

node.js の require メソッドの読み込みルールの詳細な説明

require メソッドの読み込みルールキャッシュからの読み込みを優先するコアモジュールパス形式のモ...

Linux ホスト名設定の詳細な紹介

目次1. Linuxホスト名を設定するクライアントホストを構成するサーバーホストを構成する2. ホス...

MySQL 5.7 zip アーカイブ バージョンのインストール チュートリアル

この記事では、MySQL 5.7 zipアーカイブ版のインストールチュートリアルを参考までに紹介しま...