この記事の例では、ログインインターフェース検証コードを実装するための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の運用と保守、基本的なプロセス管理、リアルタイム監視と制御
今日は、参考までに、jsを使用してカルーセルマップの効果を実現する方法についてお話ししましょう。具体...
XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのは...
現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...
イメージを作成する方法は 3 つあります。既存のイメージに基づいてコンテナを作成する、ローカル テン...
この記事では、優れた Web ページのカラー マッチングの事例を 20 件集めて紹介します。これらの...
目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照) 3. 一般...
このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...
コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...
数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...
今日、CentOS6.2 をインストールしていたところ、ハード ドライブの検出段階を通過できませんで...
MySQLでは、2つ以上のベーステーブルにビューを作成します。学生テーブルとstu_infoテーブル...
目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...
この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...
この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...