検証コード干渉を実装する js (動的)

この記事の例では、検証コードの動的干渉を実装するためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。

効果1

効果2

コード 1

<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>js の簡単な検証コードの使用</title>
<スタイル>
 。コード
 {
 フォントファミリ:Arial;
 フォントスタイル:斜体;
 色:青;
 フォントサイズ:30px;
 境界線:0;
 パディング:2px 3px;
 文字間隔:3px;
 フォントの太さ: 太字; 
 フロート:左; 
 カーソル:ポインタ;
 幅:150ピクセル;
 高さ:50px;
 行の高さ:60px;
 テキスト配置:中央;
 垂直位置揃え:中央;
 背景色:#D8B7E3;
 }
 スパン {
 テキスト装飾:なし;
 フォントサイズ:12px;
 色:#288bc4;
 パディング左:10px;
 }

 スパン:ホバー{
 テキスト装飾:下線;
 カーソル:ポインタ;
 }
</スタイル>

<スクリプト>
 //ページが読み込まれたときにランダムな検証コードを生成します。window.onload=function(){
 コードを作成します(4); 
 }

 //検証コードを生成するメソッド function createCode(length) {
 var コード = "";
 var codeLength = parseInt(length); //検証コードの長さ var checkCode = document.getElementById("checkCode");
 検証コードのすべての候補文字、もちろん中国語も使用できます var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
 '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'、'G'、'H'、'I'、'J'、'K'、'L'、'M'、'N'、'O'、'P'、'Q'、'R'、'S'、'T'、'U'、'V'、'W'、'X'、'Y'、'Z'); 
 //検証コードを構成する文字列をループします for (var i = 0; i < codeLength; i++)
 {
 //ランダム検証コードインデックスを取得します。var charNum = Math.floor(Math.random() * 62);
 //指定された文字検証コードに結合されます code += codeChars[charNum];
 }
 if (チェックコード)
 {
 //検証コード領域にスタイル名を追加します。 checkCode.className = "code";
 //生成された検証コードを表示領域に割り当てます。checkCode.innerHTML = code;
 }
 }
 
 //検証コードが正しいか確認する function validateCode()
 {
 //表示領域に生成された検証コードを取得します。var checkCode = document.getElementById("checkCode").innerHTML;
 //入力検証コードを取得します。var inputCode = document.getElementById("inputCode").value;
 コンソールにログ出力します。
 console.log(入力コード);
 入力コードの長さが 0 未満の場合
 {
 alert("確認コードを入力してください!");
 }
 そうでない場合 (inputCode.toUpperCase() != checkCode.toUpperCase())
 {
 alert("確認コードが正しく入力されていません!");
 コードを作成します(4);
 }
 それ以外
 {
 alert("確認コードは正しいです!");
 } 
 } 
</スクリプト>
</head>
<本文>
 <表の境界線="0" セル間隔="5" セルパディング="5" >
 <tr>
 <td> <div id="checkCode" class="code" onclick="createCode(4)" ></div></td>
 <td> <span onclick="createCode(4)">明確でない場合は、別のコードに変更してください</span></td>
 </tr>
 <tr>
 <td>認証コード:</td>
 <td><input type="text" id="inputCode" style="float:left;" /></td>
 </tr>
 <tr>
 <td></td>
 <td><input type="button" onclick="validateCode()" value="OK" /></td>
 </tr>
 </テーブル>
 </div>
</本文>
</html>

コード2

<!DOCTYPE html>

<html>
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <meta http-equiv="X-UA-compatible" content="ie=edge">
 <title>キャンバス検証コード</title>
</head>
<本文>
 <canvas width="200" height="60" id="check" style="border:1px solid #000;">お使いのブラウザはキャンバス タグをサポートしていません。 </キャンバス>
 <スクリプト>
 var ctx = document.getElementById("チェック").getContext("2d");
 var ctxW = document.getElementById("チェック").clientWidth;
 var ctxH = document.getElementById("check").clientHeight;
 /**
 * 乱数を生成し、乱数の範囲を設定します* @param {[Number]} min [乱数の範囲の下限]
 * @param {[数値]} max [乱数間隔の上限]
 * @return {[Number]} [この範囲内の乱数を返す]
 */

 関数 ranNum(最小値, 最大値) {
 Math.random() * (max - min) + min を返します。
 }
 /**
 * ランダムな色を返し、色の範囲を設定できます * @param {[Number]} min [色の下限]
 * @param {[数値]} max [色の上限]
 * @return {[String]} [ランダムカラー]
 */

 関数 ranColor(最小値, 最大値) {
 var r = ranNum(最小値, 最大値);
 var g = ranNum(最小値, 最大値);
 var b = ranNum(最小値、最大値);
 // "rgb(" + r + "," + g + "," + b + ")" を返します。
 `rgb(${r},${g},${b})` を返します。
 }
 /**
 * ランダムな文字列配列 * @return {[Array]} [ランダムな配列]
 */
 関数ranStr() {
 var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
 str.split("").sort(function() { を返す
 Math.random() - 0.5 を返す
 });
 }

 /**
 * テキスト文字列を描画 * @param {[String]} canvasId [キャンバスID]
 * @param {[Number]} canvasW [キャンバスの幅]
 * @param {[Number]} canvasH [キャンバスの高さ]
 * @param {[Number]} num [認証コードを表示する文字数]
 * @param {[Number]} fsMin [フォントサイズの下限]
 * @param {[数値]} fsMax [フォントサイズ上限]
 * @param {[Number]} frMin [フォント回転オフセット下限]
 * @param {[Number]} frMax [フォント回転オフセット上限]
 * @param {[Number]} min [色の下限]
 * @param {[数値]} max [色の上限]
 * @return {[String]} [ランダム文字列]
 */

 関数drawText(キャンバスId、キャンバスW、キャンバスH、数値、fsMin、fsMax、frMin、frMax、最小、最大) {
 var str = "";
 (var i = 0; i < num; i++) の場合 {
 var char = ranStr()[Math.floor(0, ranStr().length)];
 var fs = ranNum(fsMin, fsMax);
 canvasId.font = fs + "px Verdana";
 キャンバスID.fillStyle = ranColor(最小値, 最大値);
 // 描画ステータスを保存します canvasId.save();
 // context.translate(x,y);
 // x は値を水平座標 (x) に追加します // y は値を垂直座標 (y) に追加します // オフセット canvasId.translate(canvasW / num * i + canvasW / 20, 0);
 // 角度を変換 canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);
 // context.fillText(テキスト、x、y、最大幅);
 // text はキャンバスに出力されるテキストを指定します。
 // x テキストの描画を開始する x 座標位置 (キャンバスを基準)。
 // y テキストの描画を開始する y 座標位置 (キャンバスを基準)。
 // maxWidth はオプションです。許容されるテキストの最大幅（ピクセル単位）。
 キャンバスId.fillText(char, 0, (キャンバスH + fs) / 2.5, キャンバスW / num);
 // 以前保存したパスのステータスと属性を返します ctx.restore();
 str + = 文字;
 }

 // コンソールログ(str);
 str を返します。
 }
 
 /**
 * 背景を描画します * @param {[String]} canvasId [キャンバスID]
 * @param {[Number]} canvasW [キャンバスの幅]
 * @param {[Number]} canvasH [キャンバスの高さ]
 * @param {[数値]} min [下限値]
 * @param {[数値]} max [上限]
 */

 関数drawBg(キャンバスID、キャンバスW、キャンバスH、最小値、最大値) {
 // キャンバスの背景を描画します。canvasId.fillStyle = ranColor(min, max);
 // 塗りつぶし色 canvasId.fillRect(0, 0, canvasW, canvasH);
 }

 /**
 * 干渉ドットを描画* @param {[String]} canvasId [キャンバスID]
 * @param {[Number]} canvasW [キャンバスの幅]
 * @param {[Number]} canvasH [キャンバスの高さ]
 * @param {[Number]} num [抽選回数]
 * @param {[数値]} r [ドットの半径]
 * @param {[数値]} min [下限値]
 * @param {[Number]} 最大 [オンライン]
 */

 関数drawCircle(キャンバスID、キャンバスW、キャンバスH、数値、r、最小値、最大値) {
 (var i = 0; i < num; i++) の場合 {
 // 描画を開始します（ペンを手に取ります）
 キャンバスID.beginPath();
 // context.arc(x,y,r,sAngle,eAngle,counterclockwise); (描画)
 // x 円の中心の x 座標。
 // y 円の中心の y 座標。
 // r 円の半径。
 // sAngle 開始角度（ラジアン単位）。 （円弧の3時の位置は0度です）。
 // eAngle 終了角度（ラジアン単位）。
 // 反時計回りはオプション。描画を反時計回りにするか時計回りにするかを指定します。 False = 時計回り、True = 反時計回り。
 キャンバスId.arc(ranNum(0, キャンバスW), ranNum(0, キャンバスH), r, 0, 2 * Math.PI);

 
 // 塗りつぶし色 canvasId.fillStyle = ranColor(min, max);

 // 塗りつぶし canvasId.fill();

 // 描画を閉じる（ペンを離す）
 キャンバスID.closePath();
 }
 }

 /**
 * 干渉線分を描画します * @param {[String]} canvasId [キャンバスID]
 * @param {[Number]} canvasW [キャンバスの幅]
 * @param {[Number]} canvasH [キャンバスの高さ]
 * @param {[Number]} num [抽選回数]
 * @param {[数値]} min [下限値]
 * @param {[Number]} 最大 [オンライン]
 */

 関数drawLine(キャンバスID、キャンバスW、キャンバスH、数値、最小値、最大値) {
 (var i = 0; i < num; i++) の場合 {
 // 描画を開始します（ペンを手に取ります）
 キャンバスID.beginPath();
 //開始点を描画します canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));
 // 終点を描画します canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
 canvasId.strokeStyle = ranColor(最小値, 最大値);
 キャンバスID.stroke();
 キャンバスID.closePath();
 }
 }
 // 検証コードを描画する function drawCanvas() {
 // キャンバスをクリアする
 ctx.clearRect(0, 0, 200, 60);
 // 背景を描画します。drawBg(ctx, ctxW, ctxH, 200, 255);
 // 干渉円を描画します。drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);
 // 干渉線分を描画します。drawLine(ctx, ctxW, ctxH, 20, 0, 255);
 // 検証コードを描画します var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);
 str を返します。
 }
 キャンバスを描画します。
 document.getElementById('check').onclick = drawCanvas;
 </スクリプト>
</本文>

</html>

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

以下もご興味があるかもしれません: