この記事では、ログインスライダー検証を実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dockerデータストレージのバインドマウントの詳細な説明
>>: Docker データ ストレージ tmpfs マウントの詳細な説明
MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...
Linux CentOS 7.7 システムを Vmware にインストールする方法。最小限のインスト...
CSS レイアウトを使用して WEB 標準に準拠した Web ページを作成することは、jb51.ne...
MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...
この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...
ミニプログラムデータキャッシュ関連知識データ キャッシュ: データをキャッシュして、アプレットを終了...
境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...
最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...
Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...
この記事では、JavaScript メッセージ ボードでメッセージを追加および削除する小さな例を詳細...
タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...
1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...
この記事では、参考までに、無限ロードウォーターフォールフローを実現するためのVueの具体的なコードを...
最近、仕事でサウンド ファイルを再生するために Web ページにプレーヤーを埋め込む必要に迫られまし...
目次アニメーションプレビューその他のUIライブラリ始めるコンポーネントディレクトリ構造トーストおおよ...