JSはどうやってランダム検証コードを生成しますか？

3841 ワード

JS 認証コード

本論文の例では、JSがランダム検証コードを生成する具体的なコードを共有しています。

ウェブサイトでは様々な検証コードがよく見られます。今日はJSを使ってランダムな二次元コードを生成します。
私達はcanvasを使って検証コードの製作を行う必要があります。
キャンバスとは何ですか
HTML 5のcanvas元素はJavaScriptを使ってウェブページに画像を描きます。
キャンバスは長方形の領域です。各ピクセルをコントロールできます。
canvasは、複数の描画経路、矩形、円形、文字、および画像を追加する方法を有する。
考え方
私たちが作る二次元コードにはまずランダムな数字が必要です。次にランダムな位置が必要です。
HTML


<canvas id="canvas" style="border: 1px solid red; width: 80px; height: 40px;">
</canvas>


function getVerification() { //   
 var ctx = document.getElementById("canvas").getContext("2d");
 //     
 ctx.clearRect(0,0, 400, 400);
 //     
 ctx.font = "128px bold   ";
 //         
 ctx.textBaseline = "top";
 //     
 ctx.fillStyle = randomColor();
 //     （  ：    ，x  ，y  ）
 ctx.fillText(getRandomNum(10), 0, getRandomNum(50));
 ctx.fillStyle = randomColor();
 ctx.fillText(getRandomNum(10), 50, getRandomNum(50));
 ctx.fillStyle = randomColor();
 ctx.fillText(getRandomNum(10), 100, getRandomNum(50));
 ctx.fillStyle = randomColor();
 ctx.fillText(getRandomNum(10), 150, getRandomNum(50));
}

私たちはctx.fillStyle=randomColorを使います。を選択します。ランダムな色を設定します。数字を書くごとに色を変えます。ランドムColoe()関数コードは以下の通りです。16進数の色コードをランダムに生成できます。


function randomColor() {
 var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
 var colorArray = colorValue.split(",");
 var color = "#";
 for (var i = 0; i < 6; i++) {
 color += colorArray[Math.floor(Math.random() * 16)];
 }
 return color;
}

GatRandomNum()を用いてランダムに表示された数字とランダムな各フォントのy軸方向の位置を取得した。認証コードの数字はそれぞれ取得します。到来したパラメータnは乱数範囲を決定する。コードは以下の通りです


function getRandomNum(n){
 return parseInt(Math.random() * n); 
}

完全コード:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>2</title>
</head>

<body>
 <canvas id="canvas" style="border: 1px solid red; width: 80px; height: 40px;"></canvas>
 <span id="yanzhengma"></span><button onclick="getVerification()">   </button>
 <script>
 function randomColor() {
 var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
 var colorArray = colorValue.split(",");
 var color = "#";
 for (var i = 0; i < 6; i++) {
 color += colorArray[Math.floor(Math.random() * 16)];
 }
 return color;
 }
 function getRandomNum(n){
 return parseInt(Math.random() * n); 
 }
 function getVerification() {
 var ctx = document.getElementById("canvas").getContext("2d");
 ctx.clearRect(0,0, 400, 400);
 //     
 ctx.font = "128px bold   ";
 //         
 ctx.textBaseline = "top";
 //     
 ctx.fillStyle = randomColor();
 //     （  ：    ，x  ，y  ）
 ctx.fillText(getRandomNum(10), 0, getRandomNum(50));
 ctx.fillStyle = randomColor();
 ctx.fillText(getRandomNum(10), 50, getRandomNum(50));
 ctx.fillStyle = randomColor();
 ctx.fillText(getRandomNum(10), 100, getRandomNum(50));
 ctx.fillStyle = randomColor();
 ctx.fillText(getRandomNum(10), 150, getRandomNum(50));
 }
 getVerification();
 </script>
</body>
</html>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

微信小プログラムscroll-viewのスクロールバーの設定が実現されます。

ES 6 Aray.includesを使用した多重条件の使い方の例分析