ログインスライダー検証を実装するJavaScript

ログインスライダー検証を実装するJavaScript

この記事では、ログインスライダー検証を実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

HTMLコード

<div class="ログイン選択">
    <div v-show="errselectFlag" id="err-select"></div>
        <p id="title-p">スライダーを長押ししてドラッグし、確認します</p>
        <div id="左選択"></div>
        <div id="右選択">
        <i id="icon-dui" class="iconfont icon-right"></i>
    </div>
</div>

JavaScript コード

// スライダー検証 var oRight = document.getElementById("right-select");
var bg = document.getElementById("左選択");
var title = document.getElementById("title-p");
var i = document.getElementById("icon-dui");
    oRight.onmousedown = 関数(e) {
      var downX = e.clientX; // ボタンを押した後のウィンドウからの x 軸の距離 // マウス移動イベント oRight.onmousemove = function (e) {
        (e.clientX != 240) の場合 {
          oRight.style.left = 0 + "px";
          bg.style.left = 0 + "px";
        }
        var moveX = e.clientX - downX; // スライド時のウィンドウの x 軸からの距離 // 0 より大きい場合のみドラッグし、それ以外の場合は逆ドラッグが発生します if (moveX > 0) {
          oRight.style.left = moveX + "px"; //スライダーと左の間の距離 bg.style.width = moveX + "px"; //背景の幅はスライダーと左の間の距離です if (moveX >= 280 - oRight.offsetWidth) {
            i.className = "アイコンフォントアイコン-xingzhuang";
            i.style.color = "rgb(86, 192, 15)";
            title.innerText = "検証に合格しました";
            title.style.color = "#fff";
            oRight.onmousemove = null;
            oRight.onmousedown = null;
          }
        }
      };
    };

スタイルコード

注: スタイルはsassファイルです

*{マージン: 0;パディング: 0;ボックスサイズ: ボーダーボックス;}
    .ログイン選択{
      幅: 280ピクセル;
      高さ: 40px;
      マージン: 自動;
      上マージン: 20px;
      左マージン: 15px;
      右マージン: 15px;
      テキスト配置: 中央;
      行の高さ: 40px;
      背景: rgba(134, 134, 131, 0.6);
      ディスプレイ: フレックス;
      位置: 相対的;
      #エラー選択{
        幅: 138ピクセル;
        高さ: 38px;
        位置: 絶対;
        右: -152px;
        上: 0;
        色: #fff;
        フォントサイズ: 12px;
        境界線の半径: 5px;
        行の高さ: 38px;
        テキスト配置: 中央;
        背景: rgb(177, 71, 71);
      }
      #タイトル-p {
        テキスト配置: 中央;
        行の高さ: 40px;
        幅: 100%;
        高さ: 100%;
        フォントサイズ: 14px;
        位置: 絶対;
      }
      #左選択{
        幅: 0;
        高さ: 100%;
        変換: 翻訳(0.3秒);
        背景: rgb(86, 192, 15);
      }
      #右選択{
        幅: 40px;
        高さ: 40px;
        背景: #fff;
        色: #aaaa;
        テキスト配置: 中央;
        行の高さ: 40px;
        境界線: 1px 実線 #ccc;
        位置: 絶対;
        カーソル: 移動;
      }
    }

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

以下もご興味があるかもしれません:
  • JSはドラッグスライダー検証を実装します
  • JavaScript スライダー検証ケース
  • スライダー検証コードを実装するJavaScript
  • JavaScript でドラッグ スライダー パズルの検証機能を実装します (html5、canvas)
  • js キャンバスはスライダー検証を実現します
  • js はログインを確認するためのスライダーを実装します
  • ネイティブ JS カプセル化ドラッグ検証スライダー実装コード例
  • iQiyi スライダー暗号化の JS リバースエンジニアリングの実装

<<:  Dockerデータストレージのバインドマウントの詳細な説明

>>:  Docker データ ストレージ tmpfs マウントの詳細な説明

推薦する

MySQL データベースは XA 仕様をどのように実装しますか?

MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...

Linux CentOS 7.7 システムの VMware インストールに関する詳細なチュートリアル

Linux CentOS 7.7 システムを Vmware にインストールする方法。最小限のインスト...

ウェブページ作成の基本宣言文書型記述(DTD

CSS レイアウトを使用して WEB 標準に準拠した Web ページを作成することは、jb51.ne...

MySQLの再帰問題

MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...

jQueryは動的タグイベントを実装します

この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...

小規模プログラムへのデータキャッシュ機構の応用と実装

ミニプログラムデータキャッシュ関連知識データ キャッシュ: データをキャッシュして、アプレットを終了...

MySQL における between の境界と範囲の説明

境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...

フォーム要素とプロンプトテキストが揃っていない問題

最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...

Vue+ElementUI Treeの使い方

Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...

メッセージボードにメッセージを追加および削除するための JavaScript

この記事では、JavaScript メッセージ ボードでメッセージを追加および削除する小さな例を詳細...

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

Vue は無限ロードウォーターフォールフローを実装します

この記事では、参考までに、無限ロードウォーターフォールフローを実現するためのVueの具体的なコードを...

ウェブページにプレーヤーを埋め込む埋め込み要素の自動開始が false 無効

最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...

vue3を使用してAppleシステムのサイドメッセージプロンプト効果を模倣する

目次アニメーションプレビューその他のUIライブラリ始めるコンポーネントディレクトリ構造トーストおおよ...