ログインスライダー検証を実装する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 マウントの詳細な説明

推薦する

VMWare仮想マシンのcentosの時間が現地時間と矛盾する問題を解決する

VM Ware 仮想マシン CentOS の時刻は、次の図に示すように、現地時間と一致しません。おそ...

MySQLのタイムゾーンを表示および設定する方法

1. データベースのタイムゾーンを確認する '%time_zone' のような変数を...

PHP-HTMLhtml 重要な知識ポイントメモ(必読)

1. フレームセット、フレーム、iframeを使用して複数のウィンドウを実現する2. 画像上のマッ...

Vueベースのカスタムコンポーネントを実装してアイコンを導入する

序文プロジェクト開発では、アイコンを使用する方法はたくさんあります。iconfont で適切なアイコ...

Nginx を使用してポート転送 TCP プロキシを実装する例

目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...

JS 4つの楽しいハッカー背景効果コードを共有する

目次例1例2例3例4例1 <html> <ヘッド> <title>...

MySQL で浮動小数点データを文字データに変換するときに起こりうる問題の詳細な説明

序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...

MySQL の current_timestamp の落とし穴とその解決策を共有する

目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...

Dockerリンクはコンテナの相互接続を実現します

目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...

JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...

HTMLファイル内の中国語の文字化けとブラウザでの表示の問題

今日も私のページが文字化けしていたので、インターネットで関連する問題を検索しました。この方法はかなり...

Linux で Squid プロキシ サーバーを構築するための完全な手順

序文この記事では、Linux で Squid プロキシ サーバーを設定することに関する関連コンテンツ...

Vue3 ベースのスクリプト設定構文 $refs の使用

目次1. Vue2 構文2. Vue3の使用1. コンポーネントのref値を設定する2. コンポーネ...

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...