JavaScript+html implements random QR code verification on front-end pages

Share the cool front-end page random QR code verification for your reference. The specific content is as follows

Directly on the code

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--Introduce jQuery's js -->
    <script type="text/javascript" src="../jquery/jquery.js"></script>
</head>
<style>
    .input-val {
        width: 200px;
        height: 32px;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }
    #canvas {
        vertical-align: middle;
        box-sizing: border-box;
        border: 1px solid #ddd;
        cursor: pointer;
    }
    .btn {
        display: block;
        margin-top: 20px;
        height: 32px;
        width: 100px;
        font-size: 16px;
        color: #fff;
        background-color: #457adb;
        border: none;
        border-radius: 50px;
    }
</style>
<body>
<div class="code">
    <input type="text" value="" placeholder="Please enter the verification code (not case sensitive)" class="input-val">
    <canvas id="canvas" width="100" height="30"></canvas>
    <button class="btn">Submit</button>
</div>
</body>
<script>
    $(function(){
        var show_num = [];
        draw(show_num);

        $("#canvas").on('click',function(){
            draw(show_num);
        })
        $(".btn").on('click',function(){
            var val = $(".input-val").val().toLowerCase();
            var num = show_num.join("");
            if(val==''){
                alert('Please enter the verification code!');
            }else if(val == num){
                alert('Submission successful!');
                $(".input-val").val('');
                // draw(show_num);

            }else{
                alert('Verification code is wrong! Please re-enter!');
                $(".input-val").val('');
                // draw(show_num);
            }
        })
    })

    //Generate and render the verification code graphic function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas"); //Get the canvas object, the actor var context = canvas.getContext("2d"); //Get the canvas drawing environment, the actor's performance stage canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,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; //Get the length of the array for (var i = 0; i < 4; i++) { //The for loop here can control the number of digits of the verification code (if you want to display 6 digits, just change 4 to 6)
            var j = Math.floor(Math.random() * aLength); //Get a random index value // var deg = Math.random() * 30 * Math.PI / 180; //Generate a random radian between 0 and 30 var deg = Math.random() - 0.5; //Generate a random radian var txt = aCode[j]; //Get a random content show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20; //x coordinate of the text on the canvasvar y = 20 + Math.random() * 8; //y coordinate of the text on the canvascontext.font = "bold 23px Microsoft YaHei";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //Display lines on the verification code context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //Show small dots on the verification code context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    //Get a random color value function randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

</script>
</html>

The effect is as follows

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:

A brief discussion on the principle of js QR code scanning login
Sample code for generating QR code using js
Three.js sample code for making dynamic QR codes
Solve the problem that qrcode.js must define an empty div when generating a QR code
Implementation code for calling WeChat's QR code scanning function in js
JS realizes the function of scanning QR code with barcode scanner
How to generate a QR code with an image based on native javascript
Three ways to parse QR codes using javascript

<<: Detailed explanation of the error problem when setting the default value of 0000-00-00 in the date and datetime types of Mysql database

>>: Docker installation of MySQL (8 and 5.7)