How to implement CAPTCHA with JavaScript

This article mainly explains "how to use JavaScript to achieve CAPTCHA", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use JavaScript to achieve CAPTCHA" bar!

The details are as follows

In today's case, the effect is as follows:

In fact, there are not many difficulties in the realization of this case. Let's take a look at it.

The implementation of html and css will not be explained here, but can be compared to the following code and pay attention to the details.

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

There are two things we need to do:

1. Realize the random generation of CAPTCHA, so that it can be generated when the page is refreshed and clicked to change.

2. Compare input string with CAPTCHA.

First, we need to use for loops and Math.round (Math.random () * n) so that random numbers can be generated in each loop.

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

Other details can be checked in the code.

Document .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 } adf34y can't see and change a CAPTCHA to confirm let sum= [0 check 1, 2 3, 4 5, 6 7, 8, 9]; var check=document.getElementById ("check"); var code Function fun () {let str= "; for (let item0