JavaScript+html to implement front-end page sliding verification

This article shares the specific code of JavaScript+html to implement the front-end page sliding verification for your reference. The specific content is as follows

Share cool front-end page sliding verification

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.s202166112952045troke();
        }
    }

    //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:

The problem and solution of using Vue-scroller page input box not triggering sliding
Vue implements left and right linkage sliding pages based on better-scroll
Vue implements page switching sliding effect
How to use fingers to slide between Vue routing pages
Implementing left and right sliding effect of page switching based on Vue
JavaScript+html to implement front-end page sliding verification (2)
JavaScript gets the scroll bar position and slides the page to the anchor point
js to achieve sliding to the bottom of the page to automatically load more functions
js/jquery control page dynamic loading data sliding scroll bar automatic loading event method
Vue/js realizes the effect of automatic page sliding up

<<: Solve the problem when setting the date to 0000-00-00 00:00:00 in MySQL 8.0.13

>>: How to install JDK 13 in Linux environment using compressed package