JavaScript implementation of verification code case

This article shares the specific code for JavaScript to achieve the verification code effect for your reference. The specific content is as follows

Today's case, the effect is as follows:

There are actually not many difficulties in implementing this case. Let's take a look at it together.

The implementation of html and css will not be explained here. You can implement it yourself by comparing the following code and pay attention to the details.

Next, let's take a look at the implementation of js:

There are two things we need to do:

1. Realize the random generation of verification codes so that they can be generated when the page is refreshed or clicked to change
2. Compare the input string and the verification code

First , we need to use a for loop and Math.round(Math.random()*n) to generate random numbers in each loop.

Second , we only need to get the string entered by the user through input.value , and then compare it with the randomly generated string before (using ===)

Other details can be found in the code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 100px;
            margin:100px auto;
            background-color: hsla(180, 73%, 78%, 0.199);
            border-radius: 20px;
            text-align: center;
            padding: 20px;
        }
        #check{
            display: inline-block;
            width: 100px;
            height: 30px;
            text-align: center;
            background-color: rgba(128, 128, 128, 0.158);
            color:blue;
            font-size:26px;
            font-style: italic;
            letter-spacing: 2px;
            font-family:Arial, Helvetica, sans-serif;
            margin-bottom: 10px;
        }
        .ma{
            margin-bottom: 12px;
        }

    </style>
</head>

<body>
    <div class="container">
        <div>
            <span id="check">adf34y</span>
            <a href="#" id="checka">If it's not clear, change one</a>
        </div>
        <div class="ma">
            <label for="zheng">Verification code</label>
            <input type="text" id="zheng">
        </div>
        <button id="btn">OK</button>
    </div>

    <script>
        let sum=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
        var check = document.getElementById("check");
        var code;
        
        function fun(){
            let str="";
            for(let i=0;i<6;i++){
                let pos=Math.round(Math.random()*15); //Note this way of writing, get the random number str+=sum[pos];
            }
            check.innerHTML=str;
            return str;
        }

        window.onload = function(){
            code=fun();
        }

        let checka = document.getElementById("checka");
        checka.onclick=function(){
            code=fun();
        }
        
        let btn = document.getElementById("btn");
        btn.onclick=function(){
            let t=document.getElementById("zheng").value;
            console.log(t)
            if(t==code){
                alert("correct");
                code=fun();
                document.getElementById("zheng").value="";
            }
            else{
                alert("error");
                document.getElementById("zheng").value="";
            }
        }
        

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

Jsp method to generate page verification code [with code]
Example code of JavaScript verification code (with effect diagram)
js implements simple verification code
js realizes the countdown effect of clicking to get the verification code
Three ways to implement JS verification code function
Implementation and technical analysis of verification code generated by js
js generates the verification code and judges it directly on the front end
js+canvas realizes the function of sliding puzzle verification code
JS makes graphic verification code implementation code
js implements the login registration box mobile phone number and verification code verification (front-end part)

<<: Understand the use of CSS3's all attribute

>>: Cross-host communication between docker containers-overlay-based implementation method

CSS perfectly solves the problem of front-end image deformation

JavaScript implementation of verification code case

CSS perfectly solves the problem of front-end image deformation

CSS sets Overflow to hide the scroll bar while allowing scrolling

How to pull the docker image to view the version

Vue: Detailed explanation of memory leaks

Three uses and differences of MySQL not equal

Nginx Service Quick Start Tutorial

Pure CSS code to achieve drag effect

Summary of the style modification of the input box of type="file"

Complete steps to achieve high availability with nginx combined with keepalived

Detailed explanation of Linux netstat command

Recommend

Optimizing the slow query of MySQL aggregate statistics data

Solve the problem that VMWare cannot display in full screen after installing Mac system

Examples of common operations on MySQL foreign key constraints [view, add, modify, delete]

Summary of Mysql slow query operations

CSS3 realizes various graphic effects of small arrows

Detailed explanation of how Angular handles unexpected exception errors

Detailed steps for manually configuring the IP address in Linux

How to implement the jQuery carousel function

When to use table and when to use CSS (experience sharing)

How to use Docker Compose to implement nginx load balancing

Experience sharing by a front-end supervisor with 7 years of practical experience

Analysis of the principle of centering elements with CSS

Implementation steps for building multi-page programs using Webpack

Springboot+Vue-Cropper realizes the effect of avatar cutting and uploading

CSS3 uses scale() and rotate() to achieve zooming and rotation