フロントエンドページのスライド検証を実装するための 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>

効果は以下のとおりです