この記事の例では、ログインインターフェース検証コードを実装するためのlayuiの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 効果画像: html: <div class="layui-form-item"> <div class="layui-col-xs6"> <input type="text" value="" placeholder="確認コードを入力してください(大文字と小文字は区別されません)" class="input-val"> <キャンバスid="キャンバス" 幅="100" 高さ="30"></キャンバス> </div> <div> <input type="button" value="ログイン" class="layui-btn layui-btn-fluid" lay-submit lay-filter="ログイン"> </div> </div> 次はJSです: var show_num=[]; $(関数() { 描画(表示番号) $("#canvas").on('クリック',function() { 描画(表示番号) }) }); 次に、2 つの関数を呼び出します。 関数draw(show_num) { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document.getElementById("canvas"); // キャンバス オブジェクト (俳優) を取得します。 var context = canvas.getContext("2d"); // キャンバス描画環境 (俳優のパフォーマンス ステージ) を取得します。 canvas.width = canvas_width; キャンバスの高さ = キャンバスの高さ; var sCode = "A、B、C、E、F、G、H、J、K、L、M、N、P、Q、R、S、T、W、X、Y、Z、1、2、3、4、5、6、7、8、9、0"; var aCode = sCode.split(","); var aLength = aCode.length; //配列の長さを取得します for (var i = 0; i <= 3; i++) { var j = Math.floor(Math.random() * aLength); //ランダムなインデックス値を取得します。 var deg = Math.random() * 30 * Math.PI / 180; //0から30の間のランダムなラジアンを生成します。 var txt = aCode[j]; //ランダムなコンテンツを取得します。 show_num[i] = txt.toLowerCase(); var x = 10 + i * 20; //キャンバス上のテキストのx座標var y = 20 + Math.random() * 8; //キャンバス上のテキストのy座標context.font = "bold 23px Microsoft YaHei"; コンテキストを翻訳します(x, y); コンテキストを回転します(度); context.fillStyle = ランダムカラー(); コンテキスト.fillText(txt, 0, 0); コンテキストを回転します(-deg); コンテキストを翻訳します(-x, -y); } for (var i = 0; i <= 5; i++) { //検証コードに線を表示します context.strokeStyle = randomColor(); コンテキスト.beginPath(); コンテキストを移動します。(Math.random() * キャンバスの幅、Math.random() * キャンバスの高さ) context.lineTo(Math.random() * キャンバスの幅、Math.random() * キャンバスの高さ); コンテキスト.stroke(); } for (var i = 0; i <= 30; i++) { //検証コードに小さなドットを表示します context.strokeStyle = randomColor(); コンテキスト.beginPath(); var x = Math.random() * キャンバス幅; var y = Math.random() * canvas_height; コンテキストを移動します(x, y); コンテキスト.lineTo(x + 1, y + 1); コンテキスト.stroke(); } } function randomColor() { //ランダムな色の値を取得します var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); "rgb(" + r + "," + g + "," + b + ")" を返します。 } スタイルはプロジェクトに応じて調整する必要があります。これが私のスタイルです: <スタイル> .コード { 幅: 100%; マージン: 0 自動; } .入力値 { 幅: 63%; 背景: #ffffff; 高さ:2.8rem; パディング: 0 2%; 境界線の半径: 5px; 境界線: なし; 境界線: 1px実線rgba(0,0,0,.2); フォントサイズ: 0.9rem; } #キャンバス { フロート: 右; 表示: インラインブロック; 境界線: 1px 実線 #ccc; 境界線の半径: 5px; カーソル: ポインタ; } </スタイル> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: この記事ではSQL CASE WHENの使い方を詳しく説明します
>>: Linuxの運用と保守、基本的なプロセス管理、リアルタイム監視と制御
注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...
1.インストールしたい場所に解凍し、my.iniファイルを作成します。 my.iniの内容は次のと...
私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...
1いくつかの一般的な文字セットMySQL で最も一般的な文字セットには、ASCII 文字セット、ラテ...
私はインターネット上で数え切れないほどの my.cnf 構成を読みましたが、言及されている構成のほと...
この記事では、Linuxサーバー上でDockerを使用してNexusプライベートサーバーを構築する方...
この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...
目次ブール型数値型文字列型文字列と数値を連結する未定義およびnull配列型タプル型列挙型あらゆるタイ...
BEM は、Web 開発に対するコンポーネントベースのアプローチです。ユーザー インターフェイスを独...
フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...
この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...
シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...
Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...
場合によっては、リモート マシンでいくつかのコマンドを実行する必要があることがあります。これが時々行...
方法1: onclickイベントを使用する <input type="button&...