フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)

フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)

この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

クールなフロントエンドページのスライド検証を共有する

以前にも投稿しましたが、こちらは別のものですが、特殊効果が異なります

またはコード上で直接:

<%@ ページ contentType="text/html;charset=UTF-8" language="java" %>
<html>
<ヘッド>
    <title>タイトル</title>
    <スタイル>
        /* スライド コントロール コンテナー、灰色の背景 */
        #ドラッグコンテナ{
            位置: 相対的;
            表示: インラインブロック;
            背景: #e8e8e8;
            幅: 300ピクセル;
            高さ: 33px;
            境界線: 2px 実線 #e8e8e8;
        }
        /* スライダーの左側、緑の背景*/
        #ドラッグBg{
            位置: 絶対;
            背景色: #7ac23c;
            幅: 0px;
            高さ: 100%;
        }
        /* スライド検証コンテナテキスト*/
        #ドラッグテキスト{
            位置: 絶対;
            幅: 100%;
            高さ: 100%;
            /* テキストを水平方向に中央揃えにする */
            テキスト配置: 中央;
            /* テキストは垂直方向に中央揃えされます。パーセンテージは div の高さではなく元の行の高さに対する相対値であるため、ここではパーセンテージは使用できません。*/
            行の高さ: 33px;
            /* テキストは選択できません */
            ユーザー選択: なし;
            -webkit-user-select: なし;
        }
        /* スライダー*/
        #ドラッグハンドラ{
            位置: 絶対;
            幅: 40px;
            高さ: 100%;
            カーソル: 移動;
        }
        /* スライダーの初期背景 */
        .dragHandlerBg {
            background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
        }
        /* 検証が成功するとスライダーの背景に√が表示されます*/
        .dragHandlerOkBg {
            background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8++IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
        }
    </スタイル>
</head>
<本文>
        <div id="dragContainer"><!-- コンテナの初期背景 -->
            <div id="dragBg"></div><!-- 緑の背景 -->
            <div id="dragText"></div><!-- スライド コンテナー テキスト -->
            <div id="dragHandler" class="dragHandlerBg"></div>
        </div> <!-- スライダーの初期背景 -->
</本文>

<スクリプト>
    //Load(ページが読み込まれた後にイベントがトリガーされます)
    window.onload = 関数() {
        // スライド コントロール コンテナー (灰色の背景) を取得します。var dragContainer = document.getElementById("dragContainer");
        //スライダーの左側部分(緑の背景)を取得します。var dragBg = document.getElementById("dragBg");
        // スライディング検証コンテナのテキストを取得します。var dragText = document.getElementById("dragText");
        //スライダーを取得します var dragHandler = document.getElementById("dragHandler");

        //スライダーの最大オフセット = スライディング検証コンテナのテキストの長さ - スライダーの長さ var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;
        //検証が成功したかどうか var isVertifySucc = false;

        ドラッグを初期化します。

        関数initDrag() {
            // スライディング検証コンテナのテキストに「スライダーをドラッグして検証」と記入します
            dragText.textContent = "確認するにはスライダーをドラッグしてください";
            //スライダーにマウスダウンリスナーを追加します。dragHandler.addEventListener("mousedown", onDragHandlerMouseDown);
        }

        //スライダー関数を選択する onDragHandlerMouseDown() {
            //マウスの動きの監視 document.addEventListener("mousemove", onDragHandlerMouseMove);
            //マウスリリースリスナー document.addEventListener("mouseup", onDragHandlerMouseUp);
        }

        //スライダー移動関数 onDragHandlerMouseMove() {
            /*
            html要素にはwidth属性がなく、clientWidthのみがあります。
            offsetX は現在の要素に対する相対値、clientX と pageX は親要素に対する相対値です*/
            //スライダーの移動 var left = event.clientX - dragHandler.clientWidth / 2;
            //
            if(左 < 0) {
                左 = 0;
                //スライダーの動きがスライダーの最大オフセットより大きい場合は、検証成功関数を呼び出します} else if(left > maxHandlerOffset) {
                左 = maxHandlerOffset;
                成功を検証します。
            }
            //スライダーの移動 dragHandler.style.left = left + "px";
            //緑の背景の長さ dragBg.style.width = dragHandler.style.left;
        }

        //スライダー機能を解放する function onDragHandlerMouseUp() {
            //マウスの動きのリスニングを削除します。 document.removeEventListener("mousemove", onDragHandlerMouseMove);
            //マウスリリースリスナーを削除します document.removeEventListener("mouseup", onDragHandlerMouseUp);
            //スライダーの動きを初期化します。dragHandler.style.left = 0;
            //緑の背景を初期化します。dragBg.style.width = 0;
        }

        //検証成功 function verifySucc() {
            // マークは成功しましたが、再バインドできません isVertifySucc = false;
            // コンテナのテキストを白い「検証に合格しました」フォントに変更します。dragText.textContent = "検証に合格しました";
            dragText.style.color = "白";
            //スライダーの背景を確認します dragHandler.setAttribute("class", "dragHandlerOkBg");
            //マウスダウンリスナーを削除します。dragHandler.removeEventListener("mousedown", onDragHandlerMouseDown);
            //マウスの動きのリスニングを削除します。 document.removeEventListener("mousemove", onDragHandlerMouseMove);
            //マウスリリースリスナーを削除します document.removeEventListener("mouseup", onDragHandlerMouseUp);
            // 一致が成功したら、ジャンプ先のページを記述します //window.location.href="success page.html" rel="external nofollow";
        };
    }
</スクリプト>
</html>

効果は以下のとおりです

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

以下もご興味があるかもしれません:
  • Vue-scroller ページ入力ボックスを使用してもスライドがトリガーされない問題と解決策
  • Vueはbetter-scrollに基づいて左右のリンクスライドページを実装します
  • Vue はページ切り替えスライド効果を実装します
  • 指を使って Vue ルーティング ページ間をスライドする方法
  • Vueをベースにページ切り替えの左右スライド効果を実装する
  • フロントエンドページのスライド検証を実装するための JavaScript + HTML
  • JavaScriptはスクロールバーの位置を取得し、ページをアンカーポイントまでスライドします。
  • jsを使用してページの下部にスライドし、より多くの機能を自動的に読み込む
  • js/jquery コントロール ページ 動的読み込み データ スライディング スクロール バー 自動読み込み イベント メソッド
  • Vue/jsで自動ページスライドアップ効果を実現

<<:  MySQL データ挿入効率の比較

>>:  Linux のパスワードを紛失した場合にリセットする方法

推薦する

LinuxでDHCPサーバーを構築する方法

目次1. 基礎知識: 2. DHCPサーバーの設定: 1. サーバーのIPを確認する2. DHCP ...

Centos7 で MySQL マスター スレーブ サーバーを構築する方法 (グラフィック チュートリアル)

この記事では主に CentOS 上で MySQL マスタースレーブサーバーを構築する方法を紹介します...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

MySQL エラー番号 1129 の解決方法

SQLyog が MySQL に接続する際にエラー番号 1129 が発生します: mysql エラー...

Vue の新しい組み込みコンポーネントの使用方法の詳細な説明

目次1. テレポート1.1 テレポートの紹介1.2 テレポートの使用1.3 プレビュー効果2. サス...

2列のデータをSQLの新しい列として操作する

以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...

MySQL データベースの show processlist コマンドの使用の分析

実際のプロジェクト開発では、多数のクエリや挿入、特にマルチスレッド挿入など、データベースに大きな負荷...

MySQLのクラスタ化インデックスと非クラスタ化インデックスの詳細な説明

1. クラスター化インデックステーブル データはインデックスの順序で保存されます。つまり、インデック...

Vue3ライフサイクル関数とメソッドの詳細な説明

1. 概要いわゆるライフサイクル機能とは、特定の条件下で自動的にトリガーされる機能です。 2. VU...

Vue で axios を使用して画像をアップロードするときに発生する問題

目次FormDataとは何ですか? vueとaxiosの協力による実践的な体験追加()セット()消去...

Dockerコンテナのホスト間マルチネットワークセグメント通信ソリューションの詳細説明

1. マックヴラン前回のブログ投稿で紹介した Docker コンテナのホスト間通信を実現するための ...

JavaScript で円形のプログレスバー効果を実装する

この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...

JS オブジェクトのコピー (ディープ コピーとシャロー コピー)

目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...

DBeaver を MySQL バージョン 8 以降に接続し、起こりうる問題を解決する方法の詳細な説明

データベース MySQL バージョン 8.0.18 DBeaver.exeをダウンロードするダウンロ...

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...