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

js implements single click to modify the table

JavaScript implementation of verification code case

js implements single click to modify the table

An article to understand the creation, uploading, pulling and deployment of Docker images

Optimizing JavaScript and CSS to improve website performance

Understand the initial use of redux in react in one article

Summary of methods for creating, listing, and deleting Docker containers on Linux

Vue project realizes login and registration effect

Let's take a look at some powerful operators in JavaScript

MySQL green version setting code and 1067 error details

MySQL8.0 installation process under Centos7 in VMware workstation16 and Navicat remote connection

Detailed tutorial on using cmake to compile and install mysql under linux

Recommend

IE9beta version browser supports HTML5/CSS3

Introduction to cloud native technology kubernetes (K8S)

Solution to the inaccessibility of Tencent Cloud Server Tomcat port

Implementing Binary Search Tree in JavaScript

Summary of the use of html meta tags (recommended)

CSS3 overflow property explained

HTML page adaptive width table

A brief discussion on the pitfalls and solutions of the new features of MySQL 8.0 (summary)

HTML weight loss Streamline HTML tags to create web pages

How to use node scaffolding to build a server to implement token verification

How to use explain to query SQL execution plan in MySql

How does JS understand data URLs?

MySQL 5.7.27 installation and configuration method graphic tutorial

JS+Canvas draws a lucky draw wheel

Tips for using the docker inspect command