フロントエンドページのスライド検証を実装するための 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 のパスワードを紛失した場合にリセットする方法

推薦する

MySql でデータの重複挿入を回避する 3 つの方法

序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...

MIME タイプの完全なリスト

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

Ubuntuで顔認識ログインを実装するための完全な手順

1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...

JSは10進数を16進数に変換するサンプルコードを実装します

序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...

Nginx インストールの詳細なチュートリアル

1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...

Vueの最初のレンダリングのプロセス全体についての簡単な説明

目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...

Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明

目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...

Dockerイメージのエクスポートとインポート操作

基本イメージが以前に構成されていて、これらのイメージが他の場所でも必要な場合はどうなりますか?回答:...

Vue カプセル化に基づくプルダウン更新およびプルアップ読み込みコンポーネント

VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

JavaScriptはブラウザがIEかどうかを判定します

フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...

Vue-router は現在の場所 (/path) へのナビゲーションを許可しません。エラーの原因と修正

目次エラーメッセージ原因エラーのデモンストレーション回避策方法1方法2方法3エラーメッセージ現在の場...

Linuxのwatchコマンドの使用

1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...

Docker プライベート サーバー イメージを定期的にクリーンアップする方法

CI を利用してリリース用の Docker イメージをビルドすることで、全員のバージョンリリース効率...

Linux および Unix サーバーのセキュリティを強化する方法

ネットワーク セキュリティは非常に重要なトピックであり、サーバーはネットワーク セキュリティにおける...