jQueryはキャンバスタグを使用して検証コードを描画します

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。独自の動作はありませんが、クライアント側の JavaScript に描画 API を公開し、スクリプトがキャンバス上に必要なものを描画できるようにします。

コードは次のとおりです

css:

入力{
            幅: 200ピクセル;
            高さ: 32px;
            境界線: 1px実線 #000;
            ボックスのサイズ: 境界線ボックス;
        }
        #c1{
             垂直位置合わせ: 中央;
             ボックスのサイズ: 境界線ボックス;
             カーソル: ポインタ;
        }
        #ボタン{
            表示: ブロック;
            上マージン: 10px;
            高さ: 32px;
            フォントサイズ: 16px;
        }

​html:

<div class="code">
        <input type="text" value="" id="inputValue" placeholder="確認コードを入力してください(大文字と小文字は区別されません)">
    <canvas id="c1" width="100" height="30" style='border:1px solid black'></canvas>
    <button id="btn">送信</button>    
   
</div>

JavaScript:

$(関数(){
            //ランダムな検証コードを保存する var showNum=[]
            描画(表示数)
            $('#c1').on('クリック',function(){
                描画(表示数)
            })
            $('#btn').on('クリック',function(){
                var s = $('#inputValue').val().toLowerCase()
                var s1 = showNum.join("")
                s==s1の場合{
                    alert('送信に成功しました')
                }それ以外{
                    アラート('認証コードエラー')
                    描画(表示数)
                }
            })
 
            //キャンバスにランダムな検証コードを描画する関数をカプセル化します。function draw(showNum){
                //キャンバスを取得
                var キャンバス = $('#c1')
                var ctx = キャンバス[0].getContext('2d')
 
                //キャンバスの幅と高さを取得します var canvas_width = canvas.width()
                var キャンバスの高さ = キャンバスの高さ()
 
                // 以前に描画した内容をクリアします//0,0 開始座標をクリアします// 四角形の幅と高さ ctx.clearRect(0,0,canvas_width,canvas_height)
 
                // 描画を開始します var scode='a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,0,1,2,3,4,5,6,7,8,9'
                コンソールログ("123");
                var arrCode = scode.split(',')
                コンソールにログ出力します。
                var arrLength = arrCode.length
                (var i=0;i<4;i++){
                    var インデックス = Math.floor(Math.random()*arrCode.length)
                    //ランダムな文字 var txt = arrCode[index]
                    showNum[i] = txt.toLowerCase()
 
                    //文字の描画位置の制御を開始します var x=10+20*i//各認証コード描画の開始点のx座標 var y=20+Math.random()*8//開始点のy座標 ctx.font='bold 20px Microsoft YaHei' 
 
                    //文字の回転を開始します var deg = Math.random()-0.5
                    //Canvas は描画コンテンツの傾斜効果を実現したいので、まず平行移動する必要があります //回転ポイントをコンテンツが描画される場所に移動するには ctx.translate(x,y)
                    ctx.rotate(度)
                    //描画色をランダムな色に設定する ctx.fillStyle=randomColor()
                    ctx.fillText(txt,0,0)
                    //キャンバスを復元する ctx.rotate(-deg)
                    ctx.translate(-x,-y)
                    // ctx.stroke()
                }
                (var i=0;i<=30;i++){
                    もし(i<5){
                        //線を描く ctx.strokeStyle=randomColor()
                        ctx.beginPath()
                        ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height)
                        ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height)
                        ctx.ストローク()
                    }
                    //点を描く ctx.strokeStyle=randomColor()
                    ctx.beginPath()
                    x=Math.random()*キャンバス幅
                    y=Math.random()*canvas_height
                    ctx.moveTo(x,y)
                    ctx.lineTo(x+1,y+1)
                    ctx.ストローク()
                }
 
 
            }
            関数 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})` を返す
            }
        })

この効果を得るために

キャンバスタグをクリックすると、画像が置き換えられます

入力が正しい場合は、「入力が正しい」というプロンプト ボックスがポップアップ表示されます。

エラーがある場合は、「入力エラー」というメッセージが表示され、[OK]をクリックすると確認コードボックスが表示されます。

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

以下もご興味があるかもしれません:
  • JQueryはシンプルな検証コードプロンプトソリューションを実装します
  • jQueryは携帯電話で認証コードを送信するためのカウントダウンコードを実装します
  • jQueryは検証コードの送信と60秒のカウントダウン機能を実装します
  • 確認コードを取得するためにクリックしてから 60 秒以内に再取得を防止する jQuery プラグイン
  • 静的 HTML 検証コード検証を実装する jQuery プラグイン
  • jQuery をクリックして検証コードボタンとカウントダウン機能を取得する
  • jQueryは検証コード機能を実装します
  • jQueryはシンプルな検証コード機能を実装します
  • jQuery は SMS 認証コードを取得するためのフォームを実装します
  • jQuery は携帯電話で認証コードを送信するカウントダウン効果のコード共有を実装します

<<:  HTMLタグを閉じるのを忘れないでください

>>:  MySQL における EXISTS と IN の使用法の比較

推薦する

MySQL 集計統計データの低速クエリの最適化

前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...

SQL Server 2019 Always On クラスターの Docker デプロイメントの実装

目次Docker デプロイメント Always on クラスターDockerをインストールする建築関...

MySQL パーティション テーブルに関するパフォーマンス バグ

目次2. pt-pmapを使用したスタック分析3. このコラムのボトルネックポイントの分析4. パー...

MySQL データベースの Binlog 使用法の概要 (必読)

MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...

JSはタイムラインの自動再生を実現する

最近、次のような効果を実装しました。再生ボタンをクリックするとタイムラインの再生が開始され、一時停止...

docker で php+nginx+swoole+mysql+redis 環境を構築する方法

オペレーティングシステム: Alibaba Cloud ESC インスタンス centos7.4ソフ...

MySQL フルテキスト インデックス、ジョイント インデックス、Like クエリ、JSON クエリのうち、どれが高速ですか?

目次クエリの背景1. クエリをいいね2. JSON関数クエリ3. 共同インデックスクエリ4. 全文イ...

Zabbix Agent2を使用してOracleデータベースを監視する方法

概要zabbix バージョン 5.0 以降では、zabbix-agent2 という新しい機能が追加さ...

順序再構築に関する簡単な説明: MySQL シャーディング

目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...

Vueコンポーネント通信のさまざまな方法の詳細な説明

目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...

jsを使用して動的な背景を実現する

この記事の例では、動的な背景を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...

モバイルデバイスで 1 ピクセルの境界線の問題を解決するいくつかの方法 (5 つの方法)

この記事では、モバイルデバイス上の 1 ピクセルの境界線の問題を解決する 5 つの方法を紹介します。...

MySQL 8.0.12 のインストールと設定のグラフィックチュートリアル

MySQL 8.0.12 のダウンロードとインストールのチュートリアルを録画し、全員と共有しました。...

DELL R730 サーバーの構成 RAID とインストール サーバー システムとドメイン制御の詳細なグラフィック チュートリアル

最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...

ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" ...