js to implement verification code interference (dynamic)

This article example shares the specific code of js to implement dynamic interference of verification code for your reference. The specific content is as follows

Effect 1

Effect 2

Code 1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js simple verification code usage</title>
<style>
 .code
 {
 font-family:Arial;
 font-style:italic;
 color:blue;
 font-size:30px;
 border:0;
 padding:2px 3px;
 letter-spacing:3px;
 font-weight: bold; 
 float:left; 
 cursor:pointer;
 width:150px;
 height:50px;
 line-height:60px;
 text-align:center;
 vertical-align:middle;
 background-color:#D8B7E3;
 }
 span {
 text-decoration:none;
 font-size:12px;
 color:#288bc4;
 padding-left:10px;
 }

 span:hover {
 text-decoration:underline;
 cursor:pointer;
 }
</style>

<script>
 //Generate a random verification code when the page is loaded window.onload=function(){
 createCode(4); 
 }

 //Method to generate verification code function createCode(length) {
 var code = "";
 var codeLength = parseInt(length); //Verification code length var checkCode = document.getElementById("checkCode");
 All candidate characters for the verification code, of course, you can also use Chinese 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'); 
 //Loop through the strings that make up the verification code for (var i = 0; i < codeLength; i++)
 {
 //Get the random verification code index var charNum = Math.floor(Math.random() * 62);
 //Combined into the specified character verification code code += codeChars[charNum];
 }
 if (checkCode)
 {
 //Add a style name to the verification code area checkCode.className = "code";
 //Assign the generated verification code to the display area checkCode.innerHTML = code;
 }
 }
 
 //Check if the verification code is correct function validateCode()
 {
 //Get the verification code generated in the display area var checkCode = document.getElementById("checkCode").innerHTML;
 //Get the input verification code var inputCode = document.getElementById("inputCode").value;
 console.log(checkCode);
 console.log(inputCode);
 if (inputCode.length <= 0)
 {
 alert("Please enter the verification code!");
 }
 else if (inputCode.toUpperCase() != checkCode.toUpperCase())
 {
 alert("The verification code is entered incorrectly!");
 createCode(4);
 }
 else
 {
 alert("Verification code is correct!");
 } 
 } 
</script>
</head>
<body>
 <table border="0" cellspacing="5" cellpadding="5" >
 <tr>
 <td> <div id="checkCode" class="code" onclick="createCode(4)" ></div></td>
 <td> <span onclick="createCode(4)">If it's not clear, change another one</span></td>
 </tr>
 <tr>
 <td>Verification code:</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>
 </table>
 </div>
</body>
</html>

Code 2

<!DOCTYPE html>

<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>canvas verification code</title>
</head>
<body>
 <canvas width="200" height="60" id="check" style="border:1px solid #000;">Your browser does not support the canvas tag! </canvas>
 <script>
 var ctx = document.getElementById("check").getContext("2d");
 var ctxW = document.getElementById("check").clientWidth;
 var ctxH = document.getElementById("check").clientHeight;
 /**
 * Generate a random number and set the random number range* @param {[Number]} min [lower limit of random number range]
 * @param {[Number]} max [upper limit of random number interval]
 * @return {[Number]} [Return a random number in this range]
 */

 function ranNum(min, max) {
 return Math.random() * (max - min) + min;
 }
 /**
 * Returns a random color and can set the color range * @param {[Number]} min [color lower limit]
 * @param {[Number]} max [upper limit of color]
 * @return {[String]} [Random color]
 */

 function ranColor(min, max) {
 var r = ranNum(min, max);
 var g = ranNum(min, max);
 var b = ranNum(min, max);
 // return "rgb(" + r + "," + g + "," + b + ")";
 return `rgb(${r},${g},${b})`;
 }
 /**
 * Random string array * @return {[Array]} [Random array]
 */
 function ranStr() {
 var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
 return str.split("").sort(function () {
 return Math.random() - 0.5
 });
 }

 /**
 * Draw text string * @param {[String]} canvasId [canvas id]
 * @param {[Number]} canvasW [width of canvas]
 * @param {[Number]} canvasH [height of canvas]
 * @param {[Number]} num [Number of characters to draw the verification code]
 * @param {[Number]} fsMin [font size lower limit]
 * @param {[Number]} fsMax [font size upper limit]
 * @param {[Number]} frMin [font rotation offset lower limit]
 * @param {[Number]} frMax [font rotation offset upper limit]
 * @param {[Number]} min [color lower limit]
 * @param {[Number]} max [upper limit of color]
 * @return {[String]} [Random string]
 */

 function drawText(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {
 var str = "";
 for (var i = 0; i < num; i++) {
 var char = ranStr()[Math.floor(0, ranStr().length)];
 var fs = ranNum(fsMin, fsMax);
 canvasId.font = fs + "px Verdana";
 canvasId.fillStyle = ranColor(min, max);
 // Save the drawing status canvasId.save();
 // context.translate(x,y);
 // x adds the value to the horizontal coordinate (x) // y adds the value to the vertical coordinate (y) // offset canvasId.translate(canvasW / num * i + canvasW / 20, 0);
 // Transform angle canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);
 // context.fillText(text,x,y,maxWidth);
 // text specifies the text to be output on the canvas.
 // x The x coordinate position (relative to the canvas) at which to start drawing the text.
 // y The y coordinate position (relative to the canvas) at which to start drawing the text.
 // maxWidth is optional. The maximum allowed text width, in pixels.
 canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);
 // Return the previously saved path status and attributes ctx.restore();
 str += char;
 }

 // console.log(str);
 return str;
 }
 
 /**
 * Draw the background * @param {[String]} canvasId [canvas id]
 * @param {[Number]} canvasW [width of canvas]
 * @param {[Number]} canvasH [height of canvas]
 * @param {[Number]} min [lower limit]
 * @param {[Number]} max [upper limit]
 */

 function drawBg(canvasId, canvasW, canvasH, min, max) {
 // Draw canvas background canvasId.fillStyle = ranColor(min, max);
 // Fill color canvasId.fillRect(0, 0, canvasW, canvasH);
 }

 /**
 * Draw interference dots* @param {[String]} canvasId [canvas id]
 * @param {[Number]} canvasW [width of canvas]
 * @param {[Number]} canvasH [height of canvas]
 * @param {[Number]} num [Number of draws]
 * @param {[Number]} r [dot radius]
 * @param {[Number]} min [lower limit]
 * @param {[Number]} max [online]
 */

 function drawCircle(canvasId, canvasW, canvasH, num, r, min, max) {
 for (var i = 0; i < num; i++) {
 // Start drawing (pick up the pen)
 canvasId.beginPath();
 // context.arc(x,y,r,sAngle,eAngle,counterclockwise); (drawing)
 // x The x coordinate of the center of the circle.
 // y The y coordinate of the center of the circle.
 // r The radius of the circle.
 // sAngle starting angle, in radians. (The three o'clock position of the arc's circle is 0 degrees).
 // eAngle End angle, in radians.
 // counterclockwise optional. Specifies whether drawing should be counterclockwise or clockwise. False = clockwise, true = counterclockwise.
 canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);

 
 // Fill color canvasId.fillStyle = ranColor(min, max);

 // Fill canvasId.fill();

 // Close drawing (release the pen)
 canvasId.closePath();
 }
 }

 /**
 * Draw interference line segments * @param {[String]} canvasId [canvas id]
 * @param {[Number]} canvasW [width of canvas]
 * @param {[Number]} canvasH [height of canvas]
 * @param {[Number]} num [Number of draws]
 * @param {[Number]} min [lower limit]
 * @param {[Number]} max [online]
 */

 function drawLine(canvasId, canvasW, canvasH, num, min, max) {
 for (var i = 0; i < num; i++) {
 // Start drawing (pick up the pen)
 canvasId.beginPath();
 //Draw the starting point canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));
 // Draw the end point canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
 canvasId.strokeStyle = ranColor(min, max);
 canvasId.stroke();
 canvasId.closePath();
 }
 }
 // Draw the verification code function drawCanvas() {
 // Clear the canvas
 ctx.clearRect(0, 0, 200, 60);
 // Draw the background drawBg(ctx, ctxW, ctxH, 200, 255);
 // Draw the interference circle drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);
 // Draw the interference line segment drawLine(ctx, ctxW, ctxH, 20, 0, 255);
 // Draw the verification code var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);
 return str;
 }
 drawCanvas();
 document.getElementById('check').onclick = drawCanvas;
 </script>
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: